import {type FunctionComponent} from 'react'
import {type DisplayStatus, displayStatuses, type IArtifact} from '@/models/IArtifact.ts'
import {AnvilIcon, MapPinIcon} from 'lucide-react'
import {useUpdateArtifact} from '@/api/artifactsApi.ts'
import {useNavigate} from 'react-router'

const ArtifactPageLayout: FunctionComponent<IArtifact> = ({
  imageUrl,
  name,
  displayStatus,
  history,
  descriptions,
  id,
  era,
  material,
  origin,
}) => {
  const {mutate: updateArtifact} = useUpdateArtifact()
  const navigate = useNavigate()

  return (
    <div className="artifact-detail">
      <img src={imageUrl} alt={name} />

      <div className="status">{displayStatus}</div>

      <div className="metadata">
        <div className="header">
          <div>
            <h2>{name}</h2>
            <p>
              {era} - {history}
            </p>
          </div>
        </div>
        <div className="detail-content">
          <strong>NL</strong>
          <p>{descriptions.NL}</p>
          <strong>EN</strong>
          <p>{descriptions.EN}</p>
          <strong>FR</strong>
          <p>{descriptions.FR}</p>

          <select
            value={displayStatus}
            onChange={evt =>
              updateArtifact({
                id,
                artifact: {displayStatus: evt.target.value as DisplayStatus},
              })
            }>
            {displayStatuses.map(s => (
              <option value={s} key={s}>
                {s}
              </option>
            ))}
          </select>
        </div>
        <div className="footer">
          <div>
            <MapPinIcon /> {origin}
          </div>
          <div>
            <AnvilIcon /> {material}
          </div>
        </div>
        <div className="navigation-footer">
          <button onClick={() => void navigate(-1)}>Go back</button>
        </div>
      </div>
    </div>
  )
}

export default ArtifactPageLayout
