import { Button, Layout } from "antd";
import PeopleIcon from "components/Icons/PeopleIcon";
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { ProGray1 } from "ThemeConstants";
import PayForActions from "./components/PayForActions";
import PaymentSummary from "./components/PaymentSummary";
import TotalPeopleActions from "./components/TotalPeopleActions";
import styles from "./SplitBillPage.module.css";

export default function SplitBillPage() {
  const { t } = useTranslation();
  const { subdomain } = useParams();

  return (
    <>
      <Layout>
        <ProHeader>{t("checkout.splitBill")}</ProHeader>
        <Layout.Content
          style={{
            display: "flex",
            flexDirection: "column",
            height: "82vh",
            padding: 16,
            gap: 16,
            overflow: "auto",
            scrollbarWidth: "none",
          }}
        >
          <ProInputCard title={t("checkout.splitBill")}>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "1rem",
              }}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  gap: "1rem",
                  padding: 8,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "1rem",
                  }}
                >
                  <Button
                    type="text"
                    shape="circle"
                    style={{
                      backgroundColor: "rgba(95, 108, 123, 0.05)",
                      position: "relative",
                      top: -10,
                    }}
                  >
                    <PeopleIcon />
                  </Button>
                  <ProText
                    style={{
                      fontSize: "1rem",
                      marginTop: 3,
                      color: ProGray1,
                    }}
                  >
                    {t("checkout.totalPeople")}
                  </ProText>
                </div>

                <TotalPeopleActions />
              </div>

              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  gap: "1rem",
                  padding: 8,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "1rem",
                  }}
                >
                  <Button
                    type="text"
                    shape="circle"
                    style={{
                      backgroundColor: "rgba(95, 108, 123, 0.05)",
                      position: "relative",
                      top: -10,
                    }}
                  >
                    <PeopleIcon />
                  </Button>
                  <ProText
                    style={{
                      fontSize: "1rem",
                      marginTop: 2,
                      color: ProGray1,
                    }}
                  >
                    {t("checkout.payFor")}
                  </ProText>
                </div>

                <PayForActions />
              </div>
            </div>
          </ProInputCard>
          <PaymentMethods />
          <PaymentSummary />
        </Layout.Content>
        <Layout.Footer className={styles.checkoutButtonContainer}>
          <Link to={`/${subdomain}/order`} style={{ width: "100%" }}>
            <Button
              type="primary"
              shape="round"
              className={styles.placeOrderButton}
            >
              {t("checkout.placeOrder")}
            </Button>
          </Link>
        </Layout.Footer>
      </Layout>
    </>
  );
}