import { Button, Card, Divider, Form, Input, Row } from "antd";
import ApartmentIcon from "components/Icons/address/ApartmentIcon";
import HouseIcon from "components/Icons/address/HouseIcon";
import OfficeIcon from "components/Icons/address/OfficeIcon";
import ProHeader from "components/ProHeader/ProHeader";
import ProText from "components/ProText";
import { selectTheme } from "features/theme/themeSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { colors, ProBlack2, ProGray1 } from "ThemeConstants";
import { AddressSummary } from "../checkout/components/AddressSummary";
import styles from "./address.module.css";
import ProPhoneInput from "components/ProPhoneInput";

export default function AddressPage() {
  const { t } = useTranslation();
  const { themeName } = useAppSelector(selectTheme);
  const [form] = Form.useForm();
  const { subdomain } = useParams();

  return (
    <>
      <ProHeader>{t("address.title")}</ProHeader>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          height: "80vh",
          minHeight: "80vh",
          padding: 16,
          overflowY: "auto",
          scrollbarWidth: "none",
          marginBottom: "10vh",
        }}
      >
        <AddressSummary />

        <Card style={{ marginTop: 16 }} title={t("address.addressDetails")}>
          <div className={styles.services}>
            <Button className={styles.serviceButton} icon={<ApartmentIcon />}>
              <ProText style={{ fontWeight: "bold", color: ProGray1 }}>
                {t("address.apartment")}
              </ProText>
            </Button>
            <Button className={styles.serviceButton} icon={<HouseIcon />}>
              <ProText style={{ fontWeight: "bold", color: ProGray1 }}>
                {t("address.house")}
              </ProText>
            </Button>
            <Button className={styles.serviceButton} icon={<OfficeIcon />}>
              <ProText style={{ fontWeight: "bold", color: ProGray1 }}>
                {t("address.office")}
              </ProText>
            </Button>
          </div>

          <Divider style={{ margin: "17px 0 0 0" }} />

          <Form
            layout="vertical"
            style={{ marginTop: 12 }}
            name="loginForm"
            form={form}
          >
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ display: "flex", gap: 10 }}>
                <Form.Item
                  name="floor"
                  rules={[{ required: true, message: "" }]}
                  style={{ width: "100%" }}
                >
                  <Input
                    placeholder={t("address.floor")}
                    style={{
                      fontSize: 14,
                      height: 50,
                    }}
                    autoFocus={false}
                  />
                </Form.Item>{" "}
                <Form.Item
                  name="apt"
                  rules={[{ required: true, message: "" }]}
                  style={{ width: "100%" }}
                >
                  <Input
                    placeholder={t("address.aptNumber")}
                    style={{
                      fontSize: 14,
                      height: 50,
                    }}
                    autoFocus={false}
                  />
                </Form.Item>
              </div>
              <Form.Item
                name="street"
                rules={[{ required: true, message: "" }]}
              >
                <Input
                  placeholder={t("address.street")}
                  style={{
                    fontSize: 14,
                    height: 50,
                  }}
                  autoFocus={false}
                />
              </Form.Item>
              <Form.Item
                name="additional"
                rules={[{ required: true, message: "" }]}
              >
                <Input
                  placeholder={t("address.additionalDirection")}
                  style={{
                    fontSize: 14,
                    height: 50,
                  }}
                  autoFocus={false}
                />
              </Form.Item>

              <Form.Item
                name="addressLabel"
                rules={[{ required: true, message: "" }]}
              >
                <Input
                  placeholder={t("address.addressLabel")}
                  style={{
                    fontSize: 14,
                    height: 50,
                  }}
                  autoFocus={false}
                />
              </Form.Item>
            </div>
          </Form>
        </Card>
      </div>
      <Row
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
          height: 80,
          backgroundColor: themeName === "light" ? "white" : ProBlack2,
        }}
      >
        <Link
          to={`/${subdomain}/menu?orderType=${OrderType.Delivery}`}
          style={{ width: "100%" }}
        >
          <Button
            type="primary"
            size="large"
            style={{
              width: "100%",
              borderRadius: 1000,
              backgroundColor: !location
                ? "rgba(233, 233, 233, 1)"
                : colors.primary,
              color: "#FFF",
              height: 50,
              border: "none",
              boxShadow: "none",
            }}
            disabled={false}
          >
            {t("address.saveAddress")}
          </Button>
        </Link>
      </Row>
    </>
  );
}