"use client"

import { titleState } from "@/recoil"
import { useEffect, useMemo, useState } from "react"
import { useSetRecoilState } from "recoil"
import { Button, Tabs, type TabsProps } from "antd"
import { css } from "@emotion/css"
import classNames from "classnames"
import UserInfo from "@/component/Profile/UserInfo"
import { useGetProfile } from "@/hook/useAuth"
import { useTranslations } from "next-intl"
import { LoadingBox } from "@/component/Common/LoadingBox"
import Membership from "@/component/Profile/Membership"
import { EditOutlined } from "@ant-design/icons"
import Business from "@/component/Profile/Business"
import Affiliate from "@/component/Profile/Affiliate"
import { filter } from "lodash"
import EditProfile from "@/component/Profile/EditProfile"
import ProfileFeed from "@/component/Profile/feed"
import FAQDrawer from "@/component/Profile/FAQDrawer"

export default function ProfileContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const { data: user, isLoading, refetch } = useGetProfile()
  const trans = useTranslations("profile")
  const [isEdit, setIsEdit] = useState(false)
  const isBusinessAccount = useMemo(() => !["Personel", "Blogger"]?.includes(user?.data?.group || ""), [user])
  // const [tab, setTab] = useState(isBusinessAccount && !isLoading ? "1" : "2")
  const [tab, setTab] = useState('0')
  const [faqVisible, setFaqVisible] = useState(false)

  useEffect(() => {
    setPageTitle("User Profile")
  }, [])

  const itemTabs: TabsProps["items"] = [
    {
      key: "0",
      label: "Wizzor Feed",
      children: (
        <div className="px-4 xl:px-6">
          <ProfileFeed
          // user={user?.data || {}}
          // isLoading={isLoading}
          />
        </div>
      ),
      disabled: false,
    },
    {
      key: "1",
      label: trans("business"),
      children: (
        <div className="px-4 xl:px-6">
          <Business
            user={user?.data || {}}
            isLoading={isLoading}
          />
        </div>
      ),
      disabled: isBusinessAccount,
    },
    {
      key: "2",
      label: trans("membership"),
      children: (
        <div className="px-4 xl:px-6">
          <Membership user={user?.data || null} />
        </div>
      ),
      disabled: false,
    },
    {
      key: "3",
      label: trans("affiliate"),
      children: (
        <div className="px-4 xl:px-6">
          <Affiliate
            user={user?.data || {}}
            isLoading={isLoading}
            onOpenFAQ={() => setFaqVisible(true)}
            onOpenProfile={() => setTab("0")}
            onReloadUser={() => refetch()}
          />
        </div>
      ),
      disabled: false,
    },
  ]

  const onChange = (key: string) => {
    setTab(key)
  }

  const tabCustomCss = css`
    height: 100%;
    .ant-tabs-content-holder {
      overflow-y: auto;
    }
    .ant-tabs-nav {
      &:before {
        border-color: var(--secondary-20);
      }
    }
    .ant-tabs-nav-wrap {
      padding: 0 1rem;
    }
    .ant-tabs-tab-btn {
      color: var(--secondary-50);
    }
    .ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: var(--market--title-color) !important;
        text-shadow: 0 0 0.25px var(--market--title-color) !important;
      }
    }
    .ant-tabs-ink-bar {
      background-color: var(--market--title-color);
    }
    @media (min-width: 992px) {
      .ant-tabs-tab-btn {
        font-size: 1rem;
      }
      .ant-tabs-tab {
        padding: 1.25rem 0;
      }
    }
    @media (min-width: 1280px) {
      .ant-tabs-tab-btn {
        font-size: 1.125rem;
      }
      .ant-tabs-nav-wrap {
        padding: 0 1.5rem;
      }
      .ant-tabs-tab {
        padding: 1.5rem 0;
      }
    }
  `

  return (
    <div className="h-full flex flex-col md:flex-row gap-4 md:gap-0">
      <div className="overflow-y-auto border border-[var(--secondary-20)] rounded-lg shrink-0 w-full md:w-5/12 xl:w-1/3">
        <div className="border-b border-[var(--secondary-20)] px-4 xl:px-6 py-2 lg:py-3 xl:py-4 flex justify-between items-center">
          <p className="text-lg lg:text-xl xl:text-2xl font-bold text-[var(--secondary-100)]">{trans("information")}</p>
          <Button
            type="primary"
            icon={<EditOutlined />}
            onClick={() => setIsEdit((pre) => !pre)}
            className="md:!text-base font-bold !h-10 !rounded-lg">
            {trans("edit_profile")}
          </Button>
        </div>
        {isLoading ? <LoadingBox /> : <UserInfo user={user?.data || null} />}
      </div>
      <div className="w-full md:w-7/12 xl:w-2/3 md:pl-4">
        <div className="border border-[var(--secondary-20)] rounded-lg h-full">
          {isLoading ? (
            <LoadingBox />
          ) : (
            <Tabs
              activeKey={tab}
              items={filter(itemTabs, { disabled: false })}
              className={classNames(tabCustomCss)}
              onChange={onChange}
            />
          )}
        </div>
      </div>
      <EditProfile
        user={user?.data || null}
        isOpen={isEdit}
        setOpen={setIsEdit}
        onSuccess={() => {
          setIsEdit(false)
          refetch()
        }}
      />
      <FAQDrawer
        isOpen={faqVisible}
        setOpen={setFaqVisible}
      />
    </div>
  )
}