import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'

const PlacementSurface = forwardRef((props, refs) => {
  const { getMessage } = useMessage()
  const { id, lines, info, rotate, xInversion, yInversion } = props
  let { length1, length2, length3, length4, length5, lengthetc, azimuth } = refs

  const [azimuthDirection, setAzimuthDirection] = useState(azimuth.current)

  const num = ['①', '②', '③', '④', '⑤']
  const getImageUrl = () => {
    // re_는 normal의 y축 대칭 이미지
    const imageName = id < 10 ? '0' + id : id
    let imageRotate = 0
    if (xInversion && !yInversion) {
      if (rotate % 2 === 0 || rotate < 0) {
        imageRotate = Math.abs(rotate % 4)
      } else {
        if (rotate < 0) {
          imageRotate = Math.abs((rotate - 2) % 4)
        } else {
          imageRotate = Math.abs((rotate + 2) % 4)
        }
      }
    } else if (xInversion && yInversion) {
      imageRotate = Math.abs((rotate + 4) % 4)
    } else if (xInversion !== yInversion && rotate < 0) {
      imageRotate = Math.abs(rotate)
    } else if (!xInversion && yInversion) {
      if (rotate % 2 === 0 || rotate < 0) {
        imageRotate = Math.abs(rotate % 4)
      } else {
        if (rotate < 0) {
          imageRotate = Math.abs((rotate - 2) % 4)
        } else {
          imageRotate = Math.abs((rotate + 2) % 4)
        }
      }
    } else {
      imageRotate = (rotate + 4) % 4
    }
    const rotateType = imageRotate % 4 !== 0 ? (imageRotate % 4) * 90 + 'deg' : 'normal'
    if (xInversion !== yInversion) {
      return `/static/images/canvas/shape/re_${rotateType}/plane_tab${imageName}.svg`
    } else {
      return `/static/images/canvas/shape/${rotateType}/plane_tab${imageName}.svg`
    }
  }

  const azimuthButton = (direction, e) => {
    setAzimuthDirection(direction)
    azimuth.current = direction
  }

  return (
    <>
      <div className="plane-shape-wrapper">
        <div className="plane-box shape-box">
          <h3 className="plane-box-tit">{getMessage('setting')}</h3>
          <div className="shape-box-inner">
            <div className="shape-img">
              <Image src={getImageUrl()} alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
            </div>
            <div className="shape-data">
              <div className="eaves-keraba-table">
                {lines?.map((line, index) => (
                  <div className="eaves-keraba-item" id={index} key={index}>
                    <div className="eaves-keraba-th">
                      {/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
                      {num[index]}
                    </div>
                    <div className="eaves-keraba-td">
                      <div className="outline-form">
                        <div className="input-grid mr5" style={{ width: '57px' }}>
                          {/*<input*/}
                          {/*  type="text"*/}
                          {/*  className="input-origin plane block"*/}
                          {/*  defaultValue={line.value}*/}
                          {/*  ref={*/}
                          {/*    line.isDiagonal*/}
                          {/*      ? lengthetc*/}
                          {/*      : index === 0*/}
                          {/*        ? length1*/}
                          {/*        : index === 1*/}
                          {/*          ? length2*/}
                          {/*          : index === 2*/}
                          {/*            ? length3*/}
                          {/*            : index === 3*/}
                          {/*              ? length4*/}
                          {/*              : length5*/}
                          {/*  }*/}
                          {/*/>*/}

                          <CalculatorInput
                            id=""
                            name=""
                            label=""
                            className="input-origin plane block"
                            value={line.value}
                            onChange={()=>{}}
                            ref={
                              line.isDiagonal
                                ? lengthetc
                                : index === 0
                                  ? length1
                                  : index === 1
                                    ? length2
                                    : index === 2
                                      ? length3
                                      : index === 3
                                        ? length4
                                        : length5
                            }
                            options={{
                              allowNegative: false,
                              allowDecimal: false
                            }}
                          />
                        </div>
                        <span className="thin">mm</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="plane-box direction-box">
          <h3 className="plane-box-tit">{getMessage('setting')}</h3>
          <div className="plane-direction-box">
            <div className="plane-direction">
              <span className="top">{getMessage('commons.north')}</span>
              <span className="right">{getMessage('commons.east')}</span>
              <span className="bottom">{getMessage('commons.south')}</span>
              <span className="left">{getMessage('commons.west')}</span>
              <button className={`plane-btn up ${azimuthDirection === 'up' ? ' act' : ''}`} onClick={() => azimuthButton('up')}></button>
              <button className={`plane-btn right ${azimuthDirection === 'right' ? ' act' : ''}`} onClick={() => azimuthButton('right')}></button>
              <button className={`plane-btn down ${azimuthDirection === 'down' ? ' act' : ''}`} onClick={() => azimuthButton('down')}></button>
              <button className={`plane-btn left ${azimuthDirection === 'left' ? ' act' : ''}`} onClick={() => azimuthButton('left')}></button>
            </div>
          </div>
        </div>
      </div>
      {info && <div className="plane-tab-guide">{info}</div>}
    </>
  )
})

export default PlacementSurface