import React from 'react'
import {
  Box,
  CardHeader,
  CardBody,
  Button,
  Card,
  Heading,
  Input,
  CloseButton,
  FormControl,
  FormLabel,
  FormHelperText,
  FormErrorMessage,
  useBreakpointValue,
  Flex,
  Stack
} from '@chakra-ui/react'
import { Controller } from 'react-hook-form'
import { AddIcon } from '@chakra-ui/icons'
import { useTranslation } from 'react-i18next'

import { ErrorSpan } from '../../style'
import { useCreateCourse } from '../hooks'

interface CreateCourseFormProps {
  onClose: () => void
}

/**
 * Компонент формы создания нового курса
 */
export const CreateCourseForm = ({ onClose }: CreateCourseFormProps) => {
  const { t } = useTranslation()
  const { control, errors, handleSubmit, onSubmit, isLoading, error } = useCreateCourse(onClose)
  
  const headingSize = useBreakpointValue({ base: 'md', md: 'lg' })
  const formSpacing = useBreakpointValue({ base: 5, md: 10 })
  const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })

  return (
    <Card align="left">
      <CardHeader display="flex" flexWrap="wrap" alignItems="center">
        <Heading as="h2" size={headingSize} mt="0" flex="1" mr={2} mb={{ base: 2, md: 0 }}>
          {t('journal.pl.course.createTitle')}
        </Heading>
        <CloseButton ml={{ base: 'auto', md: 0 }} onClick={onClose} />
      </CardHeader>
      <CardBody>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Stack spacing={formSpacing} align="left">
            <Controller
              control={control}
              name="startDt"
              rules={{ required: t('journal.pl.common.requiredField') }}
              render={({ field }) => (
                <FormControl
                isRequired
                isInvalid={Boolean(errors.startDt)}
                >
                  <FormLabel>{t('journal.pl.common.startDate')}</FormLabel>
                  <Input
                    {...field}
                    required={false}
                    placeholder={t('journal.pl.common.selectDateTime')}
                    size="md"
                    type="date"
                    />
                  {errors.startDt ? (
                    <FormErrorMessage>
                      {errors.startDt?.message}
                    </FormErrorMessage>
                  ) : (
                    <FormHelperText>
                      {t('journal.pl.course.specifyStartDate')}
                    </FormHelperText>
                  )}
                </FormControl>
              )}
            />
            <Controller
              control={control}
              name="name"
              rules={{
                required: t('journal.pl.common.requiredField'),
              }}
              render={({ field }) => (
                <FormControl
                isRequired
                isInvalid={Boolean(errors.name)}
                >
                  <FormLabel>{t('journal.pl.course.newLectureName')}:</FormLabel>
                  <Input
                    {...field}
                    required={false}
                    placeholder={t('journal.pl.course.namePlaceholder')}
                    size="md"
                    />
                  {errors.name && (
                    <FormErrorMessage>
                      {errors.name.message}
                    </FormErrorMessage>
                  )}
                </FormControl>
              )}
              />

            <Flex mt={formSpacing} justifyContent={{ base: 'center', md: 'flex-start' }}>
              <Stack direction={{ base: 'column', sm: 'row' }} spacing={2} width={{ base: '100%', sm: 'auto' }}>
                <Button
                  size={buttonSize}
                  type="submit"
                  leftIcon={<AddIcon />}
                  colorScheme="blue"
                  width={{ base: '100%', sm: 'auto' }}
                  isLoading={isLoading}
                >
                  {t('journal.pl.common.create')}
                </Button>
                <Button
                  size={buttonSize}
                  variant="outline"
                  width={{ base: '100%', sm: 'auto' }}
                  onClick={onClose}
                >
                  {t('journal.pl.common.cancel')}
                </Button>
              </Stack>
            </Flex>
          </Stack>

          {error && (
            <Box mt={4}>
              <ErrorSpan>{(error as any).error}</ErrorSpan>
            </Box>
          )}
        </form>
      </CardBody>
    </Card>
  )
}