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 { Checkbox, Form, Input } from "antd";
import styles from "./SenderformationCard.module.css";
import TextArea from "antd/es/input/TextArea";
import ProText from "components/ProText";

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

  return (
    <ProInputCard title={t("cardDetails.receiverInformation")}>
      <div className={styles.customerInformationCard}>
        <Form.Item name="receiverName">
          <Input
            placeholder={t("cardDetails.yourName")}
            size="large"
            autoFocus={false}
            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
            value={giftDetails?.senderName}
            onChange={(e) => {
              dispatch(updateGiftDetails({ senderName: e.target.value }));
            }}
          />
        </Form.Item>
        <ProPhoneInput
          propName="yourPhone"
          value={giftDetails?.senderPhone}
          onChange={(e) => {
            dispatch(updateGiftDetails({ senderPhone: e }));
          }}
        />
        <Form.Item name="isSecret" colon={false}>
          <Checkbox
            style={{
              fontSize: 14,
            }}
            autoFocus={false}
            checked={giftDetails?.isSecret}
            onChange={(e) => {
              dispatch(updateGiftDetails({ isSecret: e.target.checked }));
            }}
          >
            <ProText>{t("cardDetails.keepMyNameSecret")}</ProText>
          </Checkbox>
        </Form.Item>
      </div>
    </ProInputCard>
  );
}