'use client'

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

  const { swalFire } = useSwal()
  const { managementState } = useContext(GlobalDataContext)

  const copyObjectNo = async (objectNo) => {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard
        .writeText(objectNo)
        .then(() => {
          swalFire({
            text: getMessage('stuff.detail.header.successCopy'),
            type: 'alert',
          })
        })
        .catch(() => {
          swalFire({
            text: getMessage('stuff.detail.header.failCopy'),
            type: 'alert',
          })
        })
    } 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')
        swalFire({
          text: getMessage('stuff.detail.header.successCopy'),
          type: 'alert',
        })
      } catch (err) {
        swalFire({
          text: getMessage('stuff.detail.header.failCopy'),
          type: 'alert',
        })
      } 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 ? `${dayjs(managementState.specificationConfirmDate).format('YYYY.MM.DD')}` : ''}
        </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>
  )
}