import { Checkbox, Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProPhoneInput from "components/ProPhoneInput";
import ProText from "components/ProText";
import { selectCart, updateOrder } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";

const { TextArea } = Input;

export function GiftCard() {
  const { t } = useTranslation();
  const { order } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  return (
    <>
    <ProInputCard title={t("address.giftDetails")}> 
      

      <ProPhoneInput
        propName="receiverPhone"
        label={t("address.receiverPhone")}
        value={order?.receiverPhone}
        onChange={(e) => {
          dispatch(updateOrder({ ...order, receiverPhone: e }));
        }}
      />

      <Form.Item name="message" label={t("address.message")}>
        <TextArea
          placeholder={t("address.message")}
          size="large"
          style={{
            fontSize: 14,
            borderRadius: 10,
          }}
          rows={2}
          autoFocus={false}
          value={order?.senderName}
          onChange={(e) => {
            dispatch(updateOrder({ ...order, senderName: e.target.value }));
          }}
        />
      </Form.Item>

      <Form.Item
        name="senderName"
        label={t("address.senderName")}
        rules={[{ required: true, message: "" }]}
        colon={false}
      >
        <Input
          placeholder={t("address.senderName")}
          size="large"
          style={{
            fontSize: 14,
            height: 50,
          }}
          autoFocus={false}
          value={order?.senderPhone}
          onChange={(e) => {
            dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
          }}
        />
      </Form.Item>

      <ProPhoneInput
        propName="senderPhone"
        label={t("address.receiverPhone")}
      />

      <Form.Item
        name="senderEmail"
        label={t("address.senderEmail")}
        rules={[{ required: true, message: "" }]}
        colon={false}
      >
        <Input
          placeholder={t("address.senderEmail")}
          size="large"
          style={{
            fontSize: 14,
            height: 50,
          }}
          autoFocus={false}
          value={order?.senderEmail}
          onChange={(e) => {
            dispatch(updateOrder({ ...order, senderEmail: e.target.value }));
          }}
        />
      </Form.Item>

      <Form.Item
        name="isSecret"
        rules={[{ required: true, message: "" }]}
        colon={false}
      >
        <Checkbox
          style={{
            fontSize: 14,
          }}
          autoFocus={false}
          checked={order?.isSecret}
          onChange={(e) => {
            dispatch(updateOrder({ ...order, isSecret: e.target.checked }));
          }}
        >
          <ProText>{t("address.keepMyNameSecret")}</ProText>
        </Checkbox>
      </Form.Item>
    </ProInputCard>
    </>
  );
}