import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { fontSelector } from '@/store/fontAtom'
import { useEffect } from 'react'

export function useFont() {
  const canvas = useRecoilValue(canvasState)
  const commonText = useRecoilValue(fontSelector('commonText'))
  const dimensionLineText = useRecoilValue(fontSelector('dimensionLineText'))
  const flowText = useRecoilValue(fontSelector('flowText'))
  const lengthText = useRecoilValue(fontSelector('lengthText'))
  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))

  useEffect(() => {
    if (canvas && commonText.fontWeight.value) {
      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
      textObjs.forEach((obj) => {
        obj.set({
          fontFamily: commonText.fontFamily.value,
          fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
          fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
          fontSize: commonText.fontSize.value,
          fill: commonText.fontColor.value,
        })
      })
      canvas.renderAll()
    }
  }, [commonText])

  useEffect(() => {
    if (canvas && dimensionLineText.fontWeight.value) {
      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
      textObjs.forEach((obj) => {
        obj.set({
          fontFamily: dimensionLineText.fontFamily.value,
          fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
          fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
          fontSize: dimensionLineText.fontSize.value,
          fill: dimensionLineText.fontColor.value,
        })
      })
      canvas.renderAll()
    }
  }, [dimensionLineText])

  useEffect(() => {
    if (canvas && flowText.fontWeight.value) {
      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
      textObjs.forEach((obj) => {
        obj.set({
          fontFamily: flowText.fontFamily.value,
          fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
          fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
          fontSize: flowText.fontSize.value,
          fill: flowText.fontColor.value,
        })
      })
      canvas.renderAll()
    }
  }, [flowText])

  useEffect(() => {
    if (canvas && lengthText.fontWeight.value) {
      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
      textObjs.forEach((obj) => {
        obj.set({
          fontFamily: lengthText.fontFamily.value,
          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
          fontSize: lengthText.fontSize.value,
          fill: lengthText.fontColor.value,
        })
      })
      canvas.renderAll()
    }
  }, [lengthText])

  useEffect(() => {}, [circuitNumberText])

  return {}
}