import { Form, Layout } from "antd";
import InputCard from "components/InputCard";
import OrderSummary from "components/OrderSummary/OrderSummary";
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader";
import { selectCart } from "features/order/orderSlice";
import { AddressSummary } from "pages/checkout/components/AddressSummary";
import BriefMenu from "pages/checkout/components/BriefMenu";
import { GiftCard } from "pages/checkout/components/GiftCard";
import PhoneCard from "pages/checkout/components/PhoneCard";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../address/address.module.css";
import PayButton from "./components/PayButton";


export default function PayPage() {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { phone, order, orderType } = useAppSelector(selectCart);
  return (
    <>
      <Form
        form={form}
        initialValues={{
          phone,
        }}
        layout="vertical"
      >
        <Layout>
          <ProHeader>{t("pay.title")}</ProHeader>
          <Layout.Content className={styles.checkoutContainer}>
            <AddressSummary />
            {orderType === OrderType.ToRoom && (
              <InputCard
                title={t("address.roomNo")}
                name="roomNumber"
                placeholder={t("address.roomNo")}
                value={order?.roomNumber}
              />
            )}
            {orderType === OrderType.ToOffice && (
              <InputCard
                title={t("address.officeNo")}
                name="officeNumber"
                placeholder={t("address.officeNo")}
                value={order?.officeNumber}
              />
            )}
            {orderType === OrderType.Gift && <GiftCard />}
            {/* <RoomDetails />
            <OfficeDetails /> */}
            {/* <GiftDetails /> */}
            <BriefMenu />
            <OrderSummary />
            <PhoneCard />
            <PaymentMethods />
          </Layout.Content>

          <PayButton form={form} />
        </Layout>
      </Form>
    </>
  );
}