import { atom, selector } from 'recoil'
import { MENU } from '@/common/common'
import { outerLineFixState, outerLinePointsState } from '@/store/outerLineAtom'
import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
import { basicSettingState } from '@/store/settingAtom'

export const canvasState = atom({
  key: 'canvasState',
  default: null,
  dangerouslyAllowMutability: true,
})

export const textState = atom({
  key: 'textState',
  default: 'test text',
})

export const canvasZoomState = atom({
  key: 'canvasZoomState',
  default: 100,
})

export const modeState = atom({
  key: 'modeState',
  default: 'default',
})

export const guideModeLineState = atom({
  key: 'guideLineModeState',
  default: false,
})

export const fontFamilyState = atom({
  key: 'fontFamilyState',
  default: 'Noto Sans KR',
})

export const fontSizeState = atom({
  key: 'fontSizeState',
  default: 20,
})

export const canvasSizeState = atom({
  key: 'canvasSize',
  default: {
    vertical: 1000,
    horizontal: 1600,
  },
})

export const sortedPolygonArray = atom({
  key: 'sortedArray',
  default: [],
  dangerouslyAllowMutability: true,
})

export const roofState = atom({
  key: 'roof',
  default: {},
  dangerouslyAllowMutability: true,
})

export const wallState = atom({
  key: 'wall',
  default: {},
  dangerouslyAllowMutability: true,
})

export const roofPolygonPatternArrayState = atom({
  key: 'roofPolygonPattern',
  default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
  dangerouslyAllowMutability: true,
})

export const roofPolygonArrayState = atom({
  key: 'roofPolygonArray',
  default: [],
  dangerouslyAllowMutability: true,
})

export const templateTypeState = atom({
  key: 'templateType',
  default: 0, //1:모임지붕, 2:A타입, 3:B타입
  dangerouslyAllowMutability: true,
})

//셀 그린 이후에 생성하는 state
export const drewRoofCellsState = atom({
  key: 'drewRoofCells',
  default: [],
  dangerouslyAllowMutability: true,
})

// 지붕재 width, height, rafter(서까래), roofStyle을 갖고있고 roofStyle 1은 정방향, 2는 지그재그
export const roofMaterialState = atom({
  key: 'roofMaterial',
  default: { width: 20, height: 10, rafter: 0, roofStyle: 2 },
  dangerouslyAllowMutability: true,
})

export const compassState = atom({
  key: 'compass',
  default: undefined,
  dangerouslyAllowMutability: true,
})

export const guideLineState = atom({
  key: 'guideLine',
  default: {},
  dangerouslyAllowMutability: true,
})

export const currentObjectState = atom({
  key: 'currentObject',
  default: null,
  dangerouslyAllowMutability: true,
})

export const horiGuideLinesState = atom({
  key: 'horiGuideLines',
  default: [],
  // dangerouslyAllowMutability: true,
})

export const vertGuideLinesState = atom({
  key: 'vertGuideLines',
  default: [],
})

export const canvasSettingState = atom({
  key: 'canvasSetting',
  default: {},
  dangerouslyAllowMutability: true,
})

// 현재 지붕 패턴
export const currentPatternState = atom({
  key: 'currentPattern',
  default: {},
  dangerouslyAllowMutability: true,
})

// 설정
export const customSettingsState = atom({
  key: 'customSettings',
  default: {},
  dangerouslyAllowMutability: true,
})

// cad 도면 파일 사용 여부
export const useCadFileState = atom({
  key: 'useCadFile',
  default: false,
})

// cad 도면 파일 이름
export const cadFileNameState = atom({
  key: 'cadFileName',
  default: '',
})

// cad 도면 파일 조정 완료
export const cadFileCompleteState = atom({
  key: 'cadFileComplete',
  default: false,
})

export const useGoogleMapFileState = atom({
  key: 'useGoogleMapFile',
  default: false,
})

// 구글맵 저장 이미지 파일 이름
export const googleMapFileNameState = atom({
  key: 'googleMapFileName',
  default: '',
})

export const globalCompassState = atom({
  key: 'globalCompass',
  default: 0,
  dangerouslyAllowMutability: true,
})

// 면형상 배치 모드
export const surfacePlacementModeState = atom({
  key: 'surfacePlacementMode',
  default: { width: 0, height: 0, areaBoundary: true, inputType: 'free' },
})

// 오브젝트 배치 모드
export const objectPlacementModeState = atom({
  key: 'objectPlacementMode',
  default: { width: 0, height: 0, areaBoundary: false, inputType: 'free', batchType: 'opening' },
})

export const currentMenuState = atom({
  key: 'currentMenu',
  default: MENU.INITIAL_CANVAS_SETTING,
})

// 수직 수평 모드
export const verticalHorizontalModeState = atom({
  key: 'verticalHorizontalMode',
  default: true,
})

// 흡착점 모드
export const adsorptionPointModeState = atom({
  key: 'adsorptionPointModeState',
  default: true,
})
// 흡착점 추가모드
export const adsorptionPointAddModeState = atom({
  key: 'adsorptionPointAddModeState',
  default: false,
})

// 흡착점 범위
export const adsorptionRangeState = atom({
  key: 'adsorptionRangeState',
  default: 50,
})

// 도면크기 설정
export const planSizeSettingState = atom({
  key: 'planSizeSettingMode',
  default: { originHorizon: 1600, originVertical: 1600 },
})

// 점,선 그리드 설정
export const dotLineGridSettingState = atom({
  key: 'gridSettingState',
  default: {
    INTERVAL: {
      type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
      ratioInterval: 910,
      verticalInterval: 910,
      horizontalInterval: 910,
      dimension: 1, // 치수
    },
    DOT: false,
    LINE: false,
  },
})

export const dotLineIntervalSelector = selector({
  key: 'dotLineIntervalSelector',
  get: ({ get }) => {
    const gridSetting = get(dotLineGridSettingState)
    return gridSetting.INTERVAL.type === 1
      ? {
          horizontalInterval: Math.round(gridSetting.INTERVAL.horizontalInterval / 10),
          verticalInterval: Math.round(gridSetting.INTERVAL.verticalInterval / 10),
        }
      : {
          horizontalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
          verticalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
        }
  },
})

// canvas plan 초기 목록
export const initCanvasPlansState = atom({
  key: 'initCanvasPlans',
  default: [],
})

// 현재 canvas plan
export const currentCanvasPlanState = atom({
  key: 'currentCanvasPlan',
  default: {},
})

// 전체 canvas plan
export const plansState = atom({
  key: 'plan',
  default: [],
})

// 변경된 canvas plan 목록
export const modifiedPlansState = atom({
  key: 'modifiedPlansState',
  default: [],
})
// 변경감지 flag
export const modifiedPlanFlagState = atom({
  key: 'modifiedPlanFlagState',
  default: false,
})

export const tempGridModeState = atom({
  key: 'tempGridModeState',
  default: false,
})

export const textModeState = atom({
  key: 'textModeState',
  default: false,
})

export const canGridOptionSeletor = selector({
  key: 'canGridOptionSeletor',
  get: ({ get }) => {
    const points = get(outerLinePointsState)
    const currentMenu = get(currentMenuState)
    const outerLineFix = get(outerLineFixState)
    return points.length === 0 || outerLineFix
  },
})

export const globalPitchState = atom({
  key: 'globalPitch',
  default: 4,
})

export const pitchSelector = selector({
  key: 'pitchSelector',
  get: ({ get }) => {
    const globalPitch = get(globalPitchState)
    const basicSettingStateValue = get(basicSettingState)
    const roofAngleSet = basicSettingStateValue.roofAngleSet
    if (roofAngleSet === 'slope') {
      return globalPitch
    } else {
      return getDegreeByChon(globalPitch)
    }
  },
  set: ({ get, set }, newValue) => {
    const basicSettingStateValue = get(basicSettingState)
    const roofAngleSet = basicSettingStateValue.roofAngleSet
    if (roofAngleSet === 'slope') {
      set(globalPitchState, newValue)
    } else {
      set(globalPitchState, getChonByDegree(newValue))
    }
  },
})

export const ANGLE_TYPE = {
  SLOPE: 'slope',
  FLAT: 'flat',
}

export const currentAngleTypeSelector = selector({
  key: 'currentAngleTypeSelector',
  get: ({ get }) => {
    const basicSettingStateValue = get(basicSettingState)
    return basicSettingStateValue.roofAngleSet
  },
})

export const pitchTextSelector = selector({
  key: 'pitchTextSelector',
  get: ({ get }) => {
    const basicSettingStateValue = get(basicSettingState)
    const roofAngleSet = basicSettingStateValue.roofAngleSet
    return roofAngleSet === 'slope' ? '寸' : '度'
  },
})

//각도 표시, offset 길이에서는 각도가 한자가 아닌 도형으로 표시되어야 한다.
export const showAngleUnitSelector = selector({
  key: 'showAngleUnitSelector',
  get: ({ get }) => {
    const basicSettingStateValue = get(basicSettingState)
    const roofAngleSet = basicSettingStateValue.roofAngleSet

    return roofAngleSet === 'slope' ? '寸' : '°'
  },
})

export const moduleSetupSurfaceState = atom({
  key: 'moduleSetupSurfaceState',
  default: [],
  dangerouslyAllowMutability: true,
})

export const moduleInstSurfaceSelector = selector({
  key: 'moduleInstSurfaceSelector',
  get: ({ get, parentId }) => {
    const moduleSetupSurfaceStateValue = get(moduleSetupSurfaceState)
    return moduleSetupSurfaceStateValue.filter((obj) => obj.parentId === parentId)
  },
})

//셀 그린 이후에 생성하는 state
export const moduleIsSetupState = atom({
  key: 'moduleIsSetupState',
  default: [],
  dangerouslyAllowMutability: true,
})