import React from "react";
import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import validator from "validator";
import Divider from "../components/Divider";
import Modal from "../components/Modal";

type FormData = {
  boatName: string;
  startTime: string;
  estimatedEndTime: string;
  destination: string;
  name: string;
  email: string;
  annotations: string;
};

function Book() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({ mode: "onBlur" });
  const { t, i18n } = useTranslation();
  const onSubmit = (data: FormData) => console.log(data);
  return (
    <Container className="pt-5">
      <Row>
        <Col xs={{ span: 10, offset: 1 }}>
          <Modal>
            <h1 className="text-center">{t("book.title")}</h1>
            <p className="text-center">{t("book.subtitle")}</p>
            <Divider />
            <Form onSubmit={handleSubmit(onSubmit)}>
              <Controller
                name="boatName"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelBoatName")}</Form.Label>
                    <Form.Control type="text" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelBoatName"),
                    }),
                  },
                }}
              />
              <Controller
                name="startTime"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelStartTime")}</Form.Label>
                    <Form.Control type="text" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelStartTime"),
                    }),
                  },
                  pattern: {
                    value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
                    message: t("book.messages.invalidTime", {
                      val: t("book.labelStartTime"),
                    }),
                  },
                }}
              />
              <Controller
                name="estimatedEndTime"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelEstimatedEndTime")}</Form.Label>
                    <Form.Control type="text" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelEstimatedEndTime"),
                    }),
                  },
                  pattern: {
                    value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
                    message: t("book.messages.invalidTime", {
                      val: t("book.labelEstimatedEndTime"),
                    }),
                  },
                }}
              />
              <Controller
                name="destination"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelDestination")}</Form.Label>
                    <Form.Control type="text" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelDestination"),
                    }),
                  },
                }}
              />
              <Controller
                name="email"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelEmail")}</Form.Label>
                    <Form.Control type="email" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelEmail"),
                    }),
                  },
                  validate: (value: string) =>
                    validator.isEmail(value) ||
                    t("book.messages.invalidEmail").toString(),
                }}
              />
              <Controller
                name="name"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelName")}</Form.Label>
                    <Form.Control type="text" {...field} />
                  </div>
                )}
                rules={{
                  required: {
                    value: true,
                    message: t("book.messages.required", {
                      val: t("book.labelName"),
                    }),
                  },
                }}
              />
              <Controller
                name="annotations"
                control={control}
                render={({ field }) => (
                  <div className="mb-2">
                    <Form.Label>{t("book.labelAnnotations")}</Form.Label>
                    <Form.Control as="textarea" type="text" {...field} />
                  </div>
                )}
              />
              <Button type="submit" variant="secondary" className="mt-2 w-100">
                {t("book.buttonBookBoat")}
              </Button>
              <div className="mt-2">
                {Object.values(errors).map((error) => (
                  <p className="m-0 text-center text-danger">{error.message}</p>
                ))}
              </div>
            </Form>
          </Modal>
        </Col>
      </Row>
    </Container>
  );
}

export default Book;