'use client'

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

export default function OuterLineWall(props) {
  const { getMessage } = useMessage()
  const { length1, setLength1, length1Ref, arrow1, setArrow1 } = useOuterLineWall()
  return (
    <div className="outline-wrap">
      <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"></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('↑')}></button>
            <button className={`direction down ${arrow1 === '↓' ? 'act' : ''}`} onClick={() => setArrow1('↓')}></button>
            <button className={`direction left ${arrow1 === '←' ? 'act' : ''}`} onClick={() => setArrow1('←')}></button>
            <button className={`direction right ${arrow1 === '→' ? 'act' : ''}`} onClick={() => setArrow1('→')}></button>
          </div>
        </div>
      </div>
    </div>
  )
}