import { Button, Form, Input } from "antd";
import ProPhoneInput from "components/ProPhoneInput";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";

const { TextArea } = Input;

interface CarDetailsType {
  brandId: string;
  category: string;
  color: string;
  plateNumber: string;
}

interface AddCarBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (value: CarDetailsType) => void;
}

export function AddCarBottomSheet({
  isOpen,
  onClose,
  onSave,
}: AddCarBottomSheetProps) {
  const { t } = useTranslation();
  const [carForm] = Form.useForm();
  useEffect(() => {
    carForm.setFieldsValue({});
  }, [carForm]);

  const handleSave = () => {
    onSave(carForm.getFieldsValue());
    carForm.resetFields();
    onClose();
  };

  const handleCancel = () => {
    carForm.resetFields();
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("car.addCarDetails")}
      showCloseButton={false}
      initialSnap={1}
      height={475}
      snapPoints={[475]}
    >
      <Form
        layout="vertical"
        style={{ marginTop: 24}}
        name="carForm"
        form={carForm}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <Form.Item
            name="brandId"
            rules={[{ required: true, message: "" }]}
            colon={false}
          >
            <Input
              placeholder={t("car.brand")}
              size="large"
              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
              autoFocus={false}
            />
          </Form.Item>

          <Form.Item
            name="color"
            rules={[{ required: true, message: "" }]}
            colon={false}
          >
            <Input
              placeholder={t("car.color")}
              size="large"
              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
              autoFocus={false}
            />
          </Form.Item>

          <Form.Item
            name="category"
            rules={[{ required: true, message: "" }]}
            colon={false}
          >
            <Input
              placeholder={t("car.category")}
              size="large"
              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
              autoFocus={false}
            />
          </Form.Item>

          <Form.Item
            name="plateNumber"
            rules={[{ required: true, message: "" }]}
            colon={false}
          >
            <Input
              placeholder={t("car.plateNumber")}
              size="large"
              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
              autoFocus={false}
            />
          </Form.Item>
        </div>
      </Form>

      <br />

      <Button
        type="primary"
        style={{ width: "100%", boxShadow: "none" }}
        onClick={handleSave}
      >
        {t("car.save")}
      </Button>
    </ProBottomSheet>
  );
}
