import { Form } from "antd";
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 { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../address/address.module.css";
import { AddressSummary } from "./components/AddressSummary";
import BriefMenu from "./components/BriefMenu";
import CheckoutButton from "./components/CheckoutButton";
import { GiftDetails } from "./components/GiftDetails";
import { OfficeDetails } from "./components/OfficeDetails";
import { RoomDetails } from "./components/RoomDetails";
import PhoneCard from "./components/phoneCard";

export default function CheckoutPage() {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { phone } = useAppSelector(selectCart);
  return (
    <>
      <Form
        form={form}
        initialValues={{
          phone,
        }}
        layout="vertical"
      >
        <ProHeader>{t("checkout.title")}</ProHeader>
        <div className={styles.checkoutContainer}>
          <AddressSummary />
          <RoomDetails />
          <OfficeDetails />
          <GiftDetails />
          <BriefMenu />
          <PhoneCard />
          <PaymentMethods />
          <OrderSummary />
        </div>

        <CheckoutButton form={form} />
      </Form>
    </>
  );
}
