import { Button } 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 { useAppSelector } from "redux/hooks";
import { ProBlack2 } from "ThemeConstants";
import PayForActions from "./components/PayForActions";
import PaymentSummary from "./components/PaymentSummary";
import TotalPeopleActions from "./components/TotalPeopleActions";

export default function SplitBillPage() {
  const { t } = useTranslation();
  const { id } = useParams();
  const { themeName } = useAppSelector((state) => state.theme);

  return (
    <>
      <ProHeader>{t("checkout.splitBill")}</ProHeader>
      <div
        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: -5,
                  }}
                >
                  <PeopleIcon />
                </Button>
                <ProText
                  style={{
                    fontSize: "1rem",
                    marginTop: 2,
                    color: "rgba(67, 78, 92, 1)",
                  }}
                >
                  {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: -5,
                  }}
                >
                  <PeopleIcon />
                </Button>
                <ProText
                  style={{
                    fontSize: "1rem",
                    marginTop: 2,
                    color: "rgba(67, 78, 92, 1)",
                  }}
                >
                  {t("checkout.payFor")}
                </ProText>
              </div>

              <PayForActions />
            </div>
          </div>
        </ProInputCard>
        <PaymentMethods />
        <PaymentSummary />
      </div>
      <div
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          height: "10vh",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-around",
          gap: "1rem",
          backgroundColor: themeName === "light" ? "white" : ProBlack2,
        }}
      >
        <Link to={`${id}/order`} style={{ width: "100%" }}>
          <Button
            type="primary"
            shape="round"
            style={{
              width: "100%",
              height: 48,
              marginBottom: 16,
              boxShadow: "none",
            }}
          >
            {t("checkout.placeOrder")}
          </Button>
        </Link>
      </div>
    </>
  );
}