import { useState } from 'react';
import { App, Divider, Empty, Flex } from 'antd';
import { isEmpty } from '@/utils/commons';
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
import Header from './Detail/Header';
import { useParams } from 'react-router-dom';
import useProductsStore from '@/stores/Products/Index';
import dayjs from 'dayjs';
import { usingStorage } from '@/hooks/usingStorage';
import ProductsTree from './Detail/ProductsTree';
import ProductInfo from './Detail/ProductInfo';
import NewProductModal from './Detail/NewProductModal';

function Detail() {
  const { notification, modal } = App.useApp();
  const { travel_agency_id, audit_state, use_year } = useParams();
  const [addProductVisible, setAddProductVisible] = useState(false);
  const [agencyProducts, switchParams] = useProductsStore((state) => [state.agencyProducts, state.switchParams]);
  const [getAgencyProducts, activeAgency] = useProductsStore((state) => [state.getAgencyProducts, state.activeAgency]);
  const [loading, setLoading] = useProductsStore((state) => [state.loading, state.setLoading]);

  const { travelAgencyId } = usingStorage();
  const handleGetAgencyProducts = async ({ pick_year, pick_agency, pick_state } = {}) => {
    const year = pick_year || use_year || switchParams.use_year || dayjs().year();
    const agency = pick_agency || travel_agency_id || travelAgencyId;
    const state = pick_state ?? audit_state;
    const param = { travel_agency_id: agency, use_year: year, audit_state: state };
    // setEditingProduct({});
    getAgencyProducts(param).catch((ex) => {
      setLoading(false);
      notification.error({
        message: 'Notification',
        description: ex.message,
        placement: 'top',
        duration: 4,
      });
    });
  };

  return (
    <SecondHeaderWrapper
      loading={loading}
      backTo={false}
      header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} handleNewProduct={() => setAddProductVisible(true)} />}>
      <>
        <Flex gap={10} className='h-full'>
          {/* onNodeSelect={handleNodeSelect} */}
          <ProductsTree className='basis-80 sticky top-0 overflow-y-auto shrink-0' style1={{ height: 'calc(100vh - 150px)' }} />
          <Divider type={'vertical'} className='mx-1 h-auto' />
          <div className=' flex-auto overflow-auto '>
            <ProductInfo />
          </div>
        </Flex>
      </>
    </SecondHeaderWrapper>
  );
}
export default Detail;