'use client'

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

  const { managementState } = useContext(GlobalDataContext)

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

  const copyObjectNo = async (objectNo) => {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard
        .writeText(objectNo)
        .then(() => {
          alert(getMessage('stuff.detail.header.successCopy'))
        })
        .catch(() => {
          alert(getMessage('stuff.detail.header.failCopy'))
        })
    } else {
      // Use the 'out of viewport hidden text area' trick
      const textArea = document.createElement('textArea')
      textArea.value = objectNo

      // Move textarea out of the viewport so it's not visible
      textArea.style.position = 'absolute'
      textArea.style.left = '-999999px'

      document.body.prepend(textArea)
      textArea.select()

      try {
        document.execCommand('copy')
        alert(getMessage('stuff.detail.header.successCopy'))
      } catch (err) {
        alert(getMessage('stuff.detail.header.failCopy'))
      } finally {
        textArea.remove()
      }
    }
  }

  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>
  )
}