import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProPhoneInput from "components/ProPhoneInput";
import { selectCart, updateGiftDetails } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { Form, Input } from "antd";
import styles from "./ReceivernformationCard.module.css";
import TextArea from "antd/es/input/TextArea";

export default function ReceivernformationCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { giftDetails } = useAppSelector(selectCart);

  return (
    <ProInputCard title={t("cardDetails.receiverInformation")}>
      <div className={styles.customerInformationCard}>
        <Form.Item name="receiverName" rules={[{ required: true, message: t("cardDetails.receiverNameRequired") }]}>
          <Input
            placeholder={t("cardDetails.receiverName")}
            size="large"
            autoFocus={false}
            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
            value={giftDetails?.receiverName}
            onChange={(e) => {
              dispatch(updateGiftDetails({ receiverName: e.target.value }));
            }}
          />
        </Form.Item>
        <ProPhoneInput
          propName="receiverPhone"
          value={giftDetails?.receiverPhone}
          onChange={(e) => {
            dispatch(updateGiftDetails({ receiverPhone: e }));
          }}
        />
        <Form.Item name="message">
          <TextArea
            placeholder={t("address.message")}
            size="large"
            style={{
              fontSize: 14,
              borderRadius: 10,
            }}
            rows={2}
            autoFocus={false}
            value={giftDetails?.message}
            onChange={(e) => {
              dispatch(updateGiftDetails({ message: e.target.value }));
            }}
          />
        </Form.Item>
      </div>
    </ProInputCard>
  );
}
