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 { selectCart } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import { AddressSummary } from "../checkout/components/AddressSummary";
import styles from "./address.module.css";

export default function AddressPage() {
  const { t } = useTranslation();
  const { location } = useAppSelector(selectCart);
  const [form] = Form.useForm();
  const { id } = 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: "rgba(95, 108, 123, 1)" }}
              >
                {t("address.apartment")}
              </ProText>
            </Button>
            <Button className={styles.serviceButton} icon={<HouseIcon />}>
              <ProText
                style={{ fontWeight: "bold", color: "rgba(95, 108, 123, 1)" }}
              >
                {t("address.house")}
              </ProText>
            </Button>
            <Button className={styles.serviceButton} icon={<OfficeIcon />}>
              <ProText
                style={{ fontWeight: "bold", color: "rgba(95, 108, 123, 1)" }}
              >
                {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", gap: 10 }}>
              <Form.Item
                label={t("floor")}
                name="floor"
                rules={[{ required: true, message: "" }]}
              >
                <Input
                  placeholder={t("address.floor")}
                  style={{
                    fontSize: 14,
                  }}
                  autoFocus={false}
                />
              </Form.Item>{" "}
              <Form.Item
                label={t("address.aptNumber")}
                name="apt"
                rules={[{ required: true, message: "" }]}
              >
                <Input
                  placeholder={t("address.aptNumber")}
                  style={{
                    fontSize: 14,
                  }}
                  autoFocus={false}
                />
              </Form.Item>
            </div>
            <Form.Item
              label={t("address.street")}
              name="street"
              rules={[{ required: true, message: "" }]}
            >
              <Input
                placeholder={t("address.street")}
                style={{
                  fontSize: 14,
                }}
                autoFocus={false}
              />
            </Form.Item>
            <Form.Item
              label={t("address.additionalDirection")}
              name="additional"
              rules={[{ required: true, message: "" }]}
            >
              <Input
                placeholder={t("address.additionalDirection")}
                style={{
                  fontSize: 14,
                }}
                autoFocus={false}
              />
            </Form.Item>

            <Form.Item
              label={t("address.mobileNumber")}
              name="phone"
              rules={[{ required: true, message: "" }]}
            >
              <Input
                placeholder={t("address.mobileNumber")}
                style={{
                  fontSize: 14,
                }}
                autoFocus={false}
              />
            </Form.Item>

            <Form.Item
              label={t("address.addressLabel")}
              name="addressLabel"
              rules={[{ required: true, message: "" }]}
            >
              <Input
                placeholder={t("address.addressLabel")}
                style={{
                  fontSize: 14,
                }}
                autoFocus={false}
              />
            </Form.Item>
          </Form>
        </Card>
      </div>
      <Row
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          backgroundColor: "white",
          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
          height: "10vh",
        }}
      >
        <Link
          to={`/${id}/menu?orderType=delivery`}
          style={{ width: "100%" }}
          onClick={() => {
            localStorage.setItem("orderType", "delivery");
          }}
        >
          <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",
            }}
            disabled={false}
          >
            {t("address.saveAddress")}
          </Button>
        </Link>
      </Row>
    </>
  );
}