import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProPhoneInput from "components/ProPhoneInput";
import { selectCart, updateCustomerName } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { Form, Input } from "antd";
import styles from "./CustomerInformationCard.module.css";

export default function CustomerInformationCard() {
  const { t } = useTranslation();
  const { orderType } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const customerName = useAppSelector((state) => state.order.customerName);

  return (
    orderType !== OrderType.Gift && (
      <>
        <ProInputCard title={t("checkout.customerInformation")}>
          <div className={styles.customerInformationCard}>
            <Form.Item name="customerName">
              <Input
                placeholder={t("checkout.customerName")}
                size="large"
                autoFocus={false}
                style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
                value={customerName}
                onChange={(e) => {
                  dispatch(updateCustomerName(e.target.value));
                }}
              />
            </Form.Item>
            <ProPhoneInput propName="phone" />
          </div>
        </ProInputCard>
      </>
    )
  );
}