import { Descriptions, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table/interface'
import React from 'react'
import { useTranslation } from 'react-i18next'
import {
  AdminPagerSubmissionEntryFieldQueryData,
  AdminPagerSubmissionEntryQueryData,
  AdminPagerSubmissionFormQueryData,
} from '../../../graphql/query/admin.pager.submission.query'

interface Props {
  form: AdminPagerSubmissionFormQueryData
  submission: AdminPagerSubmissionEntryQueryData
}

export const SubmissionValues: React.FC<Props> = (props) => {
  const { t } = useTranslation()

  const columns: ColumnsType<AdminPagerSubmissionEntryFieldQueryData> = [
    {
      title: t('submission:field'),
      render(row: AdminPagerSubmissionEntryFieldQueryData) {
        if (row.field) {
          return `${row.field.title}${row.field.required ? '*' : ''}`
        }

        return `${row.id}`
      },
    },
    {
      title: t('submission:value'),
      render(row: AdminPagerSubmissionEntryFieldQueryData) {
        try {
          const data = JSON.parse(row.value) as { value: string }

          return data.value
        } catch (e) {
          return row.value
        }
      },
    },
  ]

  return (
    <div>
      <Descriptions title={t('submission:submission')}>
        <Descriptions.Item label={t('submission:country')}>
          {props.submission.geoLocation.country}
        </Descriptions.Item>
        <Descriptions.Item label={t('submission:city')}>
          {props.submission.geoLocation.city}
        </Descriptions.Item>
        <Descriptions.Item label={t('submission:device.type')}>
          {props.submission.device.type}
        </Descriptions.Item>
        <Descriptions.Item label={t('submission:device.name')}>
          {props.submission.device.name}
        </Descriptions.Item>
      </Descriptions>

      <Table columns={columns} dataSource={props.submission.fields} rowKey={'id'} />
    </div>
  )
}