import { atom, selector } from 'recoil'

export const settingModalFirstOptionsState = atom({
  key: 'settingModalFirstOptions',
  default: {
    option1: [
      { id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
      { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: true },
      { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
      { id: 4, column: 'lineDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
      { id: 5, column: 'wordDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
      { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
      { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
      { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
      { id: 9, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
      { id: 10, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
    ],
    dimensionDisplay: [
      {
        id: 1,
        column: 'corridorDimension',
        name: 'modal.canvas.setting.first.option.corridor.dimension',
        selected: true,
      },
      { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
      { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
    ],
    option2: [
      { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true },
      { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
      { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
    ],
  },
  dangerouslyAllowMutability: true,
})

export const settingModalSecondOptionsState = atom({
  key: 'settingModalSecondOptions',
  default: {
    option3: [
      { id: 1, name: 'modal.canvas.setting.font.plan.edit.word' },
      { id: 2, name: 'modal.canvas.setting.font.plan.edit.flow' },
      { id: 3, name: 'modal.canvas.setting.font.plan.edit.dimension' },
      { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
    ],
    option4: [
      {
        id: 1,
        column: 'adsorpRangeSmall',
        name: 'modal.canvas.setting.font.plan.absorption.small',
        selected: true,
        range: 10,
      },
      {
        id: 2,
        column: 'adsorpRangeSmallSemi',
        name: 'modal.canvas.setting.font.plan.absorption.small.semi',
        selected: false,
        range: 30,
      },
      {
        id: 3,
        column: 'adsorpRangeMedium',
        name: 'modal.canvas.setting.font.plan.absorption.medium',
        selected: false,
        range: 50,
      },
      {
        id: 4,
        column: 'adsorpRangeLarge',
        name: 'modal.canvas.setting.font.plan.absorption.large',
        selected: false,
        range: 70,
      },
    ],
  },
  dangerouslyAllowMutability: true,
})

export const settingModalGridOptionsState = atom({
  key: 'settingModalGridOptions',
  default: [
    { id: 1, name: 'modal.canvas.setting.grid.optional.line', selected: false },
    { id: 2, name: 'modal.canvas.setting.grid.dot.line', selected: false },
    { id: 3, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
    { id: 4, name: 'modal.canvas.setting.grid.color.setting', selected: false },
  ],
  dangerouslyAllowMutability: true,
})

// 디스플레이 설정 - 할당 표시
export const allocDisplaySelector = selector({
  key: 'allocDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'allocDisplay').selected
  },
})

// 디스플레이 설정 - 외벽선 표시
export const outlineDisplaySelector = selector({
  key: 'outlineDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'outlineDisplay').selected
  },
})

// 디스플레이 설정 - 그리드 표시
export const gridDisplaySelector = selector({
  key: 'gridDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'gridDisplay').selected
  },
})

// 디스플레이 설정 - 지붕선 표시
export const roofLineDisplaySelector = selector({
  key: 'lineDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'lineDisplay').selected
  },
})

// 디스플레이 설정 - 문자 표시
export const wordDisplaySelector = selector({
  key: 'wordDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'wordDisplay').selected
  },
})

// 디스플레이 설정 - 회로번호 표시
export const circuitNumDisplaySelector = selector({
  key: 'circuitNumDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'circuitNumDisplay').selected
  },
})

// 디스플레이 설정 - 흐름 방향 표시
export const flowDisplaySelector = selector({
  key: 'flowDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'flowDisplay').selected
  },
})

// 디스플레이 설정 - 가대 표시
export const trestleDisplaySelector = selector({
  key: 'trestleDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'trestleDisplay').selected
  },
})

// 디스플레이 설정 - 이미지 표시
export const imageDisplaySelector = selector({
  key: 'imageDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'imageDisplay').selected
  },
})

// 디스플레이 설정 - 집계표 표시
export const totalDisplaySelector = selector({
  key: 'totalDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option1.find((option) => option.column === 'totalDisplay').selected
  },
})

// 디스플레이 설정 - 치수 표시
export const corridorDimensionSelector = selector({
  key: 'corridorDimensionSelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
  },
  dangerouslyAllowMutability: true,
})

// 디스플레이 설정 - 화면 표시
export const roofDisplaySelector = selector({
  key: 'roofDisplaySelector',
  get: ({ get }) => {
    const settingModalFirstOptions = get(settingModalFirstOptionsState)
    return settingModalFirstOptions.option2.find((option) => option.selected)
  },
  dangerouslyAllowMutability: true,
})

export const basicSettingState = atom({
  key: 'basicSettingState',
  default: {
    roofSizeSet: 1,
    roofAngleSet: 'slope',
    selectedRoofMaterial: {}, // 선택된 지붕재
    roofs: [], // 지붕면 할당에서 추가된 지붕재 목록
  },
  dangerouslyAllowMutability: true,
})

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

// db에 등록된 지붕재 목록
export const roofMaterialsAtom = atom({
  key: 'roofMaterialState',
  default: [],
})

//현재 선택된 지붕재
export const selectedRoofMaterialSelector = selector({
  key: 'selectedRoofMaterialSelector',
  get: ({ get }) => {
    return get(basicSettingState).selectedRoofMaterial
  },
})

// QSelectBox에서 사용할 지붕재 목록
export const roofMaterialsSelector = selector({
  key: 'roofMaterialsSelector',
  get: ({ get }) => {
    const roofMaterials = get(roofMaterialsAtom)
    return roofMaterials.map((material) => ({ ...material, id: material.roofMatlCd, name: material.roofMatlNm }))
  },
})

/**
 * 현재 선택된 물건 번호
 */
export const correntObjectNoState = atom({
  key: 'correntObjectNoState',
  default: '',
})

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