'use client'

import { useContext } from 'react'
import { useMessage } from '@/hooks/useMessage'
import dayjs from 'dayjs'
import { ManagementContext } from '@/app/management/ManagementProvider'
export default function StuffHeader() {
  const { getMessage } = useMessage()

  const { managementState } = useContext(ManagementContext)

  //물건번호 복사
  const copyObjectNo = async (objectNo) => {
    await navigator.clipboard.writeText(objectNo)
    alert(getMessage('stuff.detail.header.successCopy'))
    try {
    } catch (error) {
      alert(getMessage('stuff.detail.header.failCopy'))
    }
  }

  return (
    <div className="infomation-box-wrap">
      <div className="sub-table-box">
        <div className="info-title">{getMessage('stuff.detail.header.objectNo')}</div>
        <div className="info-inner">
          {managementState?.objectNo}{' '}
          <button
            className="copy-ico"
            onClick={() => {
              copyObjectNo(managementState?.objectNo)
            }}
          ></button>
        </div>
      </div>
      <div className="sub-table-box">
        <div className="info-title">{getMessage('stuff.detail.header.specificationConfirmDate')}</div>
        <div className="info-inner">{managementState?.specificationConfirmDate}</div>
      </div>
      <div className="sub-table-box">
        <div className="info-title">{getMessage('stuff.detail.header.lastEditDatetime')}</div>
        <div className="info-inner">
          {managementState?.lastEditDatetime ? `${dayjs(managementState.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}` : ''}{' '}
          {managementState?.lastEditUserName ? `(${managementState.lastEditUserName})` : null}
        </div>
      </div>
      <div className="sub-table-box">
        <div className="info-title">{getMessage('stuff.detail.header.createDatetime')}</div>
        <div className="info-inner">
          {managementState?.createDatetime ? `${dayjs(managementState.lastEditDatetime).format('YYYY.MM.DD')}` : ''}{' '}
          {managementState?.createUserName ? `(${managementState.createUserName})` : null}
        </div>
      </div>
    </div>
  )
}