import React, { useState } from "react";
import {
  CustomPaperBigCard,
  CustomStackFullWidth,
} from "styled-components/CustomStyles.style";
import ProfileTab from "./ProfileTab";
import Divider from "@mui/material/Divider";
import ProfileBody from "./ProfileBody";
import Address from "../address";
import { menuData } from "../header/second-navbar/account-popover/menuData";
import Router from "next/router";
import { useMediaQuery, useTheme } from "@mui/material";
import { styled } from "@mui/system";
import useGetAddressList from "../../api-manage/hooks/react-query/address/useGetAddressList";

const ProfileCard = styled(CustomPaperBigCard)(({ theme }) => ({}));

const BodySection = ({
  page,
  configData,
  orderId,
  userToken,
  deleteUserHandler,
  isLoadingDelete,
  accountDeleteStatus,
  setAccountDeleteStatus,
}) => {
  const [editProfile, setEditProfile] = useState(false);
  const [addAddress, setAddAddress] = useState(false);
  const [editAddress, setEditAddress] = useState(null);
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down("md"));
  const { data, isLoading, refetch } = useGetAddressList();
  const handleActivePage = (item) => {
    Router.push(
      {
        pathname: "/profile",
        query: { page: item?.name },
      },
      undefined,
      { shallow: true }
    );

  };
  return (
    <CustomStackFullWidth spacing={4} >
      <CustomPaperBigCard
        padding={page === "my-orders" || page === "inbox" ? "0px" : "10px"}
        noboxshadow={
          isSmall
            ? page === "my-orders" || page === "inbox"
              ? "true"
              : ""
            : "true"
        }
        backgroundcolor={
          isSmall &&
          (page === "my-orders" || page === "inbox") &&
          theme.palette.background.default
        }
      >
        {!isSmall && userToken && (
          <ProfileTab
            deleteUserHandler={deleteUserHandler}
            isLoadingDelete={isLoadingDelete}
            accountDeleteStatus={accountDeleteStatus}
            setAccountDeleteStatus={setAccountDeleteStatus}
            page={page}
            menuData={menuData}
            handlePage={handleActivePage}
            setEditProfile={setEditProfile}
          />
        )}
        {!isSmall && <Divider />}

        <ProfileBody
          key={`${page}-${orderId || 'no-order'}`}
          page={page}
          configData={configData}
          orderId={orderId}
          editProfile={editProfile}
          setEditProfile={setEditProfile}
          addAddress={addAddress}
          setAddAddress={setAddAddress}
          editAddress={editAddress}
          refetch={refetch}
          setEditAddress={setEditAddress}
        />
      </CustomPaperBigCard>

      {page === "profile-settings" && !editProfile && !addAddress && (
        <CustomPaperBigCard padding="10px" noboxshadow={isSmall ? "" : "true"}>
          <Address
            configData={configData}
            addAddress={addAddress}
            setAddAddress={setAddAddress}
            setEditAddress={setEditAddress}
            data={data}
            refetch={refetch}
            isLoading={isLoading}
          />
        </CustomPaperBigCard>
      )}
    </CustomStackFullWidth>
  );
};

export default BodySection;
