import {
  Stack,
  Text,
  List,
  Divider,
  Anchor,
  Card,
  Title,
} from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'
import { mList } from '@/i18n/messages'
import { asI18n } from '@pikku/react'

interface DocumentsChecklistProps {
  openGetHelpDrawer: () => void
}

export default function DocumentsChecklist({
  openGetHelpDrawer,
}: DocumentsChecklistProps) {
  const t = useI18n()

  return (
    <Stack gap="lg" mt="md">
      <Text lineBreaks>{t('jobs.documentschecklist.intro.part1')}</Text>
      <Text lineBreaks>{t('jobs.documentschecklist.intro.part2')}</Text>
      <Card withBorder padding="md" radius="sm">
        <Text size="sm">
          {t('jobs.documentschecklist.intro.help')}
          <Anchor
            c="primary"
            fw={700}
            td="underline"
            onClick={() => {
              openGetHelpDrawer()
            }}
          >
            {asI18n('here')}
          </Anchor>
        </Text>
      </Card>

      <Divider />
      <Title order={4}>
        {t('jobs.documentschecklist.submitoriginal.title')}
      </Title>
      <List withPadding spacing="xs">
        {mList('jobs.documentschecklist.submitoriginal.items').map(
          (item, idx) => (
            <List.Item key={'original-' + idx}>{item}</List.Item>
          )
        )}
      </List>

      <Divider />
      <Title order={4}>{t('jobs.documentschecklist.submitcopies.title')}</Title>
      <List withPadding spacing="xs">
        {mList('jobs.documentschecklist.submitcopies.items').map(
          (item, idx) => (
            <List.Item key={'copy-' + idx}>{item}</List.Item>
          )
        )}
      </List>

      <Card withBorder padding="md" radius="sm">
        <Text size="sm" lineBreaks>{t('jobs.documentschecklist.translationinfo')}</Text>
      </Card>

      <Divider />
      <Title order={4}>{t('jobs.documentschecklist.advice.title')}</Title>
      <Text lineBreaks>{t('jobs.documentschecklist.advice.part1')}</Text>
      <Text lineBreaks>{t('jobs.documentschecklist.advice.part2')}</Text>

      <Divider />
      <Title order={4}>{t('jobs.documentschecklist.contact.title')}</Title>
      <Text>
        <strong>{asI18n('Address:')}</strong>
        <br />
        {t('jobs.documentschecklist.contact.address')}
      </Text>
      <Text>
        <strong>{asI18n('Email:')}</strong>{asI18n(' ')}
        <Anchor
          href={`mailto:${t('jobs.documentschecklist.contact.email')}`}
          c="primary"
          fw={700}
        >
          {t('jobs.documentschecklist.contact.email')}
        </Anchor>
      </Text>
      <Text>
        <strong>{asI18n('Phone:')}</strong>{asI18n(' ')}{t('jobs.documentschecklist.contact.phone')}
      </Text>
      <Text>
        <em>{t('jobs.documentschecklist.contact.hours')}</em>
      </Text>
    </Stack>
  )
}