import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange } from '@/util/input-utils'

export default function Diagonal({ props }) {
  const { getMessage } = useMessage()

  const {
    length1,
    setLength1,
    length1Ref,
    length2,
    setLength2,
    length2Ref,
    outerLineDiagonalLength,
    setOuterLineDiagonalLength,
    outerLineDiagonalLengthRef,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
  } = props
  return (
    <>
      <div className="outline-wrap">
        <div className="outline-inner">
          <div className="outline-form">
            <span className="mr10">
              {getMessage('modal.cover.outline.diagonal')}
              <br />
              {getMessage('modal.cover.outline.length')}
            </span>
            <div className="input-grid" style={{ width: '63px' }}>
              <input
                type="text"
                className="input-origin block"
                value={outerLineDiagonalLength}
                ref={outerLineDiagonalLengthRef}
                onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
                placeholder="3000"
              />
            </div>
            <button
              className="reset-btn"
              onClick={() => {
                setOuterLineDiagonalLength(0)
              }}
            ></button>
          </div>
        </div>
        <div className="outline-inner">
          <div className="outline-form">
            <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
            <div className="input-grid" style={{ width: '63px' }}>
              <input
                type="text"
                className="input-origin block"
                value={length1}
                ref={length1Ref}
                onChange={(e) => onlyNumberInputChange(e, setLength1)}
                placeholder="3000"
              />
            </div>
            <button
              className="reset-btn"
              onClick={() => {
                setLength1(0)
                setLength2(0)
                setArrow1('')
                setArrow2('')
              }}
            ></button>
          </div>
          <div className="outline-form">
            <span> {getMessage('modal.cover.outline.arrow')}</span>
            <div className="grid-direction">
              <button
                className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
                onClick={() => {
                  setArrow1('↑')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
                }}
              ></button>
              <button
                className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
                onClick={() => {
                  setArrow1('↓')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
                }}
              ></button>
              <button
                className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
                onClick={() => {
                  setArrow1('←')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
                }}
              ></button>
              <button
                className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
                onClick={() => {
                  setArrow1('→')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
                }}
              ></button>
            </div>
          </div>
        </div>
        <div className="outline-inner">
          <div className="outline-form">
            <span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
            <div className="input-grid" style={{ width: '98px' }}>
              <input
                type="text"
                className="input-origin block"
                value={length2}
                ref={length2Ref}
                onChange={(e) => onlyNumberInputChange(e, setLength2)}
                readOnly={true}
                placeholder="3000"
              />
            </div>
          </div>
          <div className="outline-form">
            <span> {getMessage('modal.cover.outline.arrow')}</span>
            <div className="grid-direction">
              <button
                className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
                onClick={() => {
                  setArrow2('↑')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
                }}
              ></button>
              <button
                className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
                onClick={() => {
                  setArrow2('↓')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
                }}
              ></button>
              <button
                className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
                onClick={() => {
                  setArrow2('←')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
                }}
              ></button>
              <button
                className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
                onClick={() => {
                  setArrow2('→')
                  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
                }}
              ></button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}