'use client'

import { useAxios } from '@/hooks/useAxios'
import { redirect } from 'next/navigation'
import { useMessage } from '@/hooks/useMessage'

export default function Join() {
  const { getMessage } = useMessage()
  const { post } = useAxios()

  const joinProcess = async (formData) => {
    const param = {
      langCd: 'JA',
      lastEditUser: formData.get('userId'),
      storeQcastNm: formData.get('storeQcastNm'),
      storeQcastNmKana: formData.get('storeQcastNmKana'),
      postCd: formData.get('postCd'),
      addr: formData.get('addr'),
      telNo: formData.get('telNo'),
      fax: formData.get('fax'),
      payTermsCd: 'JB02',
      kamId: 'E1101011',
      qtCompNm: formData.get('qtCompNm'),
      qtPostCd: formData.get('qtPostCd'),
      qtAddr: formData.get('qtAddr'),
      qtTelNo: formData.get('qtTelNo'),
      qtFax: formData.get('qtFax'),
      userInfo: {
        userId: formData.get('userId'),
        userNm: formData.get('userNm'),
        userNmKana: formData.get('userNmKana'),
        telNo: formData.get('userTelNo'),
        fax: formData.get('userFax'),
        email: formData.get('email'),
        category: formData.get('category'),
      },
    }

    await post({ url: '/api/login/v1.0/user/join', data: param }).then((res) => {
      if (res) {
        if (res.result.resultCode == 'S') {
          redirect('/join/complete')
        } else {
          alert(res.result.resultMsg)
        }
      }
    })
  }

  return (
    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
      <h1 className="text-center text-4xl font-bold">{getMessage('join.title')}</h1>
      <form action={joinProcess}>
        <div className="mt-10">
          <div>
            ● {getMessage('join.sub1.title')} (*{getMessage('common.require')}) <span>{getMessage('join.sub1.comment')}</span>
          </div>
          <table className="w-full">
            <colgroup>
              <col style={{ width: '20%' }} />
              <col style={{ width: '80%' }} />
            </colgroup>
            <tbody>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNm')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="storeQcastNm"
                    name="storeQcastNm"
                    required
                    alt={getMessage('join.sub1.storeQcastNm')}
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNmKana')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="storeQcastNmKana"
                    name="storeQcastNmKana"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>
                  {getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} *
                </th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="postCd"
                    name="postCd"
                    required
                    className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.postCd_placeholder')}
                  ></input>
                  <input
                    type="text"
                    id="addr"
                    name="addr"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.addr_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.telNo')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="telNo"
                    name="telNo"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.telNo_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.fax')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="fax"
                    name="fax"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.fax_placeholder')}
                  ></input>
                </td>
              </tr>
            </tbody>
          </table>

          <div className="mt-5">
            ● {getMessage('join.sub2.title')} (*{getMessage('common.require')})
          </div>
          <table className="w-full">
            <colgroup>
              <col style={{ width: '20%' }} />
              <col style={{ width: '80%' }} />
            </colgroup>
            <tbody>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNm')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="userNm"
                    name="userNm"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNmKana')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="userNmKana"
                    name="userNmKana"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userId')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="userId"
                    name="userId"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.email')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    autoComplete="email"
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.telNo')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="userTelNo"
                    name="userTelNo"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub2.telNo_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.fax')} *</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="userFax"
                    name="userFax"
                    required
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub1.fax_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.category')}</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input id="category" name="category" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
                </td>
              </tr>
            </tbody>
          </table>

          <div className="mt-5">
            ● {getMessage('join.sub3.title')} (*{getMessage('common.require')})
          </div>
          <table className="w-full">
            <colgroup>
              <col style={{ width: '20%' }} />
              <col style={{ width: '80%' }} />
            </colgroup>
            <tbody>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtCompNm')}</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input type="text" id="qtCompNm" name="qtCompNm" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>
                  {getMessage('join.sub3.qtPostCd')}/{getMessage('join.sub3.qtAddr')}
                </th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="qtPostCd"
                    name="qtPostCd"
                    className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub3.qtPostCd_placeholder')}
                  ></input>
                  <input
                    type="text"
                    id="qtAddr"
                    name="qtAddr"
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub3.qtAddr_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtEmail')}</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="email"
                    id="qtEmail"
                    name="qtEmail"
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    autoComplete="email"
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtTelNo')}</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="qtTelNo"
                    name="qtTelNo"
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub3.qtTelNo_placeholder')}
                  ></input>
                </td>
              </tr>
              <tr>
                <th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtFax')}</th>
                <td style={{ border: '1px solid gray', padding: '5px' }}>
                  <input
                    type="text"
                    id="qtFax"
                    name="qtFax"
                    className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
                    placeholder={getMessage('join.sub3.qtFax_placeholder')}
                  ></input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="mt-10 mb-10">
          <button
            type="submit"
            className="w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            {getMessage('join.btn.approval_request')}
          </button>
        </div>
      </form>
    </div>
  )
}