import { Flex, 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, updateCollectionMethod } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../address/address.module.css";
import { AddressSummary } from "./components/AddressSummary";
import CheckoutButton from "./components/CheckoutButton";
import { GiftCard } from "./components/GiftCard";
import { OrderType } from "./hooks/types";
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
import CouponCard from "pages/cart/components/CouponCard";
import BriefMenuCard from "./components/BriefMenuCard";
import CustomerInformationCard from "./components/CustomerInformationCard";
import Ads1 from "components/Ads/Ads1";
import { useEffect } from "react";
import { CarCard } from "./components/CarCard";
import { CollectWay } from "./components/CollectWay/CollectWay";
import PickupTimeCard from "./components/pickupEstimate/TimeEstimateCard";
import VoucherSummary from "pages/redeem/components/VoucherSummary/VoucherSummary";

export default function CheckoutPage() {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const {
    phone,
    order,
    orderType,
    collectionMethod,
    coupon,
    customerName,
    tip,
  } = useAppSelector(selectCart);
  const { token } = useAppSelector((state) => state.auth);
  const dispatch = useAppDispatch();
  useEffect(() => {
    form.setFieldsValue({ coupon, collectionMethod, phone, customerName, tip });
  }, [form, phone, coupon, collectionMethod, customerName, tip]);

  return (
    <>
      <Form
        form={form}
        initialValues={{
          phone,
        }}
        layout="vertical"
      >
        <Layout>
          <ProHeader>{t("checkout.title")}</ProHeader>
          <Layout.Content className={styles.checkoutContainer}>
            {orderType === OrderType.Pickup && <CollectWay />}
            {(orderType === OrderType.Pickup ||
              orderType === OrderType.ScheduledOrder) && <PickupTimeCard />}

            {orderType === OrderType.Pickup && <CarCard />}
            {orderType === OrderType.Gift && <GiftCard />}
            <PaymentMethods />
            {!token && <CustomerInformationCard />}
            <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.Redeem && <VoucherSummary />}
            {/* {orderType === OrderType.Gift && <GiftCard />} */}
            {/* <RoomDetails />
            <OfficeDetails /> */}
            {/* <GiftDetails /> */}
            {/* <BriefMenu /> */}
            {orderType !== OrderType.Redeem && <CouponCard />}

            {/* Collection Method */}
            {orderType === OrderType.Pickup && (
              <ProInputCard title={t("cart.collectionMethod")}>
                <Form.Item
                  name="collectionMethod"
                  required
                  rules={[
                    {
                      required: true,
                      message: t("cart.pleaseSelectCollectionMethod"),
                    },
                  ]}
                >
                  <ProRatioGroups
                    options={[
                      { label: t("cart.Cash"), value: "cod", price: "" },
                      {
                        label: t("cart.e-payment"),
                        value: "paymentgateway",
                        price: "",
                      },
                    ]}
                    value={collectionMethod}
                    onRatioClick={(value) => {
                      if (value === "cod") {
                        dispatch(updateCollectionMethod(value));
                      } else {
                        dispatch(updateCollectionMethod(value));
                      }
                    }}
                  />
                </Form.Item>
              </ProInputCard>
            )}

            {/* Reward Your Waiter */}
            {orderType !== OrderType.Redeem && <RewardWaiterCard />}
            <BriefMenuCard />
            <Ads1 />
            <OrderSummary />
          </Layout.Content>

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