import { Form } from "antd";
import { useEffect } from "react";

import { selectCart } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint.ts";
import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
import { useAppSelector } from "redux/hooks";

export default function CartPage() {
  const { isDesktop } = useBreakPoint();
  const [form] = Form.useForm();
  const { specialRequest, coupon } = useAppSelector(selectCart);

  useEffect(() => {
    form.setFieldsValue({ specialRequest, coupon });
  }, [form, specialRequest, coupon]);

  // Prevent keyboard from appearing automatically on mobile
  useEffect(() => {
    // Blur any focused element when component mounts
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }

    // Prevent focus on any input elements
    const inputs = document.querySelectorAll("input, textarea, select");
    inputs.forEach((input) => {
      if (input instanceof HTMLElement) {
        input.blur();
      }
    });
  }, []);

  // Enhanced desktop layout
  if (isDesktop) {
    return (
      <Form form={form} layout="vertical">
        <CartDesktopLayout form={form} />
      </Form>
    );
  }

  // Mobile/Tablet Layout (existing code)
  return (
    <Form form={form} layout="vertical">
      <CartMobileTabletLayout form={form} />
    </Form>
  );
}