import dayjs from "dayjs";
import { useToast } from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

import { Order } from "../../models/landing";
import { OrderFormValues } from "../../components/order-form";
import { isErrorMessage } from "../../models/api";
import { URLs } from '../../__data__/urls';

const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');

const getValidCarBodyStyle = (fieldValue: string) => {
  const carBodyAsNumber = Number(fieldValue);
  return Number.isNaN(carBodyAsNumber) ? undefined : carBodyAsNumber;
};

export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocation, availableDatetimeBegin, availableDatetimeEnd }: OrderFormValues): Order.Create => {
  return {
    customer: {
      phone
    },
    car: {
      number: removeAllSpaces(carNumber),
      body: getValidCarBodyStyle(carBody),
      color: carColor
    },
    washing: {
      location: carLocation,
      begin: dayjs(availableDatetimeBegin).toISOString(),
      end: dayjs(availableDatetimeEnd).toISOString(),
    }
  };
};

export const useHandleCreateOrderMutationResponse = (query: {
  isSuccess: boolean;
  data?: {
    id: Parameters<typeof URLs.orderView.getUrl>[0];
  };
  isError: boolean;
  error?: unknown;
}) => {
  const toast = useToast();
  const navigate = useNavigate();
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.order-create.create-order-query',
  });

  useEffect(() => {
    if (query.isError) {
      toast({
        status: 'error',
        title: t('error.title'),
        description: isErrorMessage(query.error) ? query.error : undefined,
      });
    }
  }, [query.isError]);

  useEffect(() => {
    if (query.isSuccess) {
      const orderId = query.data.id;
      navigate({ pathname: URLs.orderView.getUrl(orderId) });
      toast({
        status: 'success',
        title: t('success.title'),
      });
    }
  }, [query.isSuccess]);
};