import { h, type FunctionComponent } from 'preact'
// @ts-ignore
import Format from 'easy-tz/format'
import { omit } from 'lowline'
import Section from './section.tsx'
import s from './error_details.module.scss'

const format = Format.bind(null, null, 'YYYY.MM.DD\nHH:mm:ss')

const ErrorDetails: FunctionComponent<{ error: ANY }> = ({ error }) => {
  return (
    <Section className={s.base}>
      <Section.Heading>
        {error.id} : {error.statusCode} : {error.type}
      </Section.Heading>
      <Section.Body>
        <div>{error.message}</div>
        <div>{format(error.createdAt)}</div>
        <div className={s.details}>
          <h2>Details</h2>
          <pre>{JSON.stringify(omit(error.details, ['stack', 'message', 'type']), null, '  ')}</pre>
        </div>
        <div className={s.stack}>
          <h2>Stack</h2>
          <pre>{error.stack}</pre>
        </div>
        <div className={s.method}>
          {error.method} {error.path}
        </div>
        <div className={s.headers}>
          <h2>Headers</h2>
          <pre>{JSON.stringify(error.headers, null, '  ')}</pre>
        </div>
        <div>{error.ip}</div>
        <div className={s.reqId}>{error.reqId}</div>
      </Section.Body>
    </Section>
  )
}

export default ErrorDetails