import { useEffect, useRef, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Carousel, Skeleton } from 'antd';
import { ArrowRightOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import SelectionComponent from './SelectionComponent';
import PreviewLayout1 from '../PreviewLayouts/PreviewLayout1';
import PreviewLayout2 from '../PreviewLayouts/PreviewLayout2';
import PreviewLayout3 from '../PreviewLayouts/PreviewLayout3';
import PreViewLayout4 from '../PreviewLayouts/PreViewLayout4';
import PreviewLayout5 from '../PreviewLayouts/PreviewLayout5';
import PreViewLayout6 from '../PreviewLayouts/PreViewLayout6';
import ComboLayout1 from '../PreviewLayouts/ComboLayout1';
import { changeActiveTheme, changeOthersTheme, changeSelectedTheme, changeThemeCreation, getOthersTemplate, getPreviewData, getTemplate, GlobalActiveTheme, GlobalDefaultTheme, GlobalOthersTheme, GlobalSelectedTheme } from '../../../../Features/ThemeChange/ThemeChange';
import '../../../../Styles/BookingScreen/Components/SelectionComponent/MainPage.scss';
import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2';
import { getSession } from '../../../../Services/Others';
import Buttons from '../../../../Components/Forms/Buttons';
import { BiSkipNext, BiSkipPrevious } from 'react-icons/bi';
import { MdOutlineDisplaySettings } from "react-icons/md";
import { useAuth } from '../../../../AuthContext';
import { getEmpAccess } from '../../../../Features/AppPage/CenterPage';


const BookingSelectionPage = (props) => {
 const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales Screen'
  );
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserType = getSession('UserType');
  const carouselRef = useRef();
  const childRef = useRef();
  const dispatch = useDispatch();
  const DefaultThemes = useSelector(GlobalDefaultTheme);
  const OthersTheme = useSelector(GlobalOthersTheme);
  // const [activeTheme, setActiveTheme] = useState(
  //   'default'
  // );
  const activeTheme = useSelector(GlobalActiveTheme)
  const SelectedTheme = useSelector(GlobalSelectedTheme)

  const mergedThemes = DefaultThemes.concat(OthersTheme)
  const [currentSlide, setCurrentSlide] = useState(0);
  console.log(SelectedTheme, "currentSlide")
  const [OthersCount, setOthersCount] = useState(1);
  const [isNext, isSetNext] = useState(true);
    const [empData, setEmpData] = useState();
    const [addnewAccess, setaddnewAccess] = useState(true);
  const rightIsLastSlide = currentSlide === mergedThemes.length - 1;
  const leftIsFirstSlide = currentSlide === 0 && OthersCount > 1;
  const [pendingSlide, setPendingSlide] = useState(null);
  // useEffect(() => {
  //     if (DefaultThemes?.ThemeName!== null) {
  //       const index = DefaultThemes?.findIndex(
  //         (style) => style.name === DefaultThemes?.ThemeName);
  //       if (index !== -1) {
  //         setCurrentSlide(index);
  //         setSelectedStyleName(DefaultThemes[index].name);
  //         carouselRef?.current?.goTo(index);
  //       }
  //     }
  //   }, [DefaultThemes]);
  const previewData = props.hasOwnProperty('data')
    ? props['data']
    : useSelector(getPreviewData);
  console.log(previewData, 'previewDatapreviewData');
  useEffect(() => {
    GetOthersTemplate()
    // gettemplatedetail()
  }, [])
   useEffect(() => {
      if (UserType === 'Employee') {
        fetchApi();
      }
    }, [UserType]);
  
    useEffect(() => {
      let hasAccess = false;
  
      if (UserType === 'Admin' || UserType === 'Super Admin') {
        hasAccess = true;
      } else if (UserType === 'Employee') {
        hasAccess = empData?.AddAccess === 'Y';
      } else if (UserType === 'Super Admin User') {
        hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
      }
  
      setaddnewAccess(!hasAccess);
    }, [empData, SAAccessCommonMaster, UserType]);
  
    const fetchApi = async () => {
      let data = {
        CompId: CompId,
        BranchId: BranchId,
        AppId: AppId,
        EmpId: UserId,
      };
      let response = await dispatch(getEmpAccess(data)).unwrap();
      let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
        (item) => item.ConfigName === 'Sales Screen'
      );
      setEmpData(datas?.[0]);
    };
  
  const gettemplatedetail = async () => {
    let tempdetail = await dispatch(
      getTemplate({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    ).unwrap();

    if (tempdetail?.data?.statusCode == 1) {
      dispatch(changeActiveTheme("customised"));
    }
  };

  const handleMainSubmit = () => {
    if (childRef.current) {
      childRef.current.submit(); // must match the method exposed in useImperativeHandle
    }
  };
  const renderPreviewLayout = () => {
    const layout = previewData?.BookingLayout?.[0];
    if (!layout) return <Skeleton active />;
    if (layout.includes('Combo')) return <ComboLayout1 data={previewData} />;
    switch (layout) {
      case 'Layout1':
        return <PreviewLayout1 data={previewData} />;
      case 'Layout2':
        return <PreviewLayout2 data={previewData} />;
      case 'Layout3':
        return <PreviewLayout3 data={previewData} />;
      case 'Layout4':
        return <PreViewLayout4 data={previewData} />;
      case 'Layout5':
        return <PreviewLayout5 data={previewData} />;
      case 'Layout6':
        return <PreViewLayout6 data={previewData} />;
      default:
        return <Skeleton active />;
    }
  };
  useEffect(() => {
    if (pendingSlide !== null) {
      const updatedThemes = DefaultThemes.concat(OthersTheme);
      if (pendingSlide < updatedThemes.length) {
        carouselRef.current.goTo(pendingSlide);
        setCurrentSlide(pendingSlide);
        let seltheme = updatedThemes[pendingSlide];
        dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
        dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
      }
      setPendingSlide(null); // Reset
    }
  }, [OthersTheme, DefaultThemes, pendingSlide, dispatch]);
  //  const leftOnclick = async () => {

  //     const newIndex = (currentSlide - 1 + mergedThemes.length) % mergedThemes.length;
  //     carouselRef.current.goTo(newIndex);
  //     setCurrentSlide(newIndex);
  //       let seltheme = mergedThemes[newIndex];
  //     console.log(seltheme, 'seltheme');
  //     dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
  //    dispatch(changeSelectedTheme({ThemeId:seltheme?.TemplatePreferenceId,ThemeName:seltheme?.ThemeName}));

  //     // let Styles = await dispatch(
  //     //   getConfigType({ TypeName: 'Print Style' })
  //     // ).unwrap();
  //     // if (Styles?.data?.statusCode === 1) {
  //     //   // setStyleData(Styles?.data?.data)
  //     //   let configData = Styles?.data?.data;
  //     //   let confilteredData = configData.filter(
  //     //     (item) => item.ConfigName == DefaultThemes[newIndex]?.name
  //     //   );
  //     //   handleParentAction(confilteredData?.[0]?.ConfigId, newIndex);
  //     //   console.log(confilteredData?.ConfigId);

  //       // handleStyle(configId)
  //     // }
  //   };
  // const RightOnclick = async () => {
  //   // let Allthemes = 
  //   // alert('Right Clicked');
  //   const newIndex = (currentSlide + 1) % mergedThemes.length;
  //   carouselRef.current.goTo(newIndex);
  //   setCurrentSlide(newIndex);
  //   let seltheme = mergedThemes[newIndex];
  //   console.log(seltheme, 'seltheme');
  //   dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
  //  dispatch(changeSelectedTheme({ThemeId:seltheme?.TemplatePreferenceId,ThemeName:seltheme?.ThemeName}));
  //   // console.log(newIndex,currentSlide, 'newIndexnewIndex');
  //     // handleParentAction(confilteredData?.[0]?.ConfigId, newIndex);

  //     // handleStyle(configId)

  // };
  const RightOnclick = async () => {
    if (rightIsLastSlide && isNext) {
      await GetMoreTemplate();
      setPendingSlide(currentSlide + 1); // Ask to jump to the next slide after fetch
    } else {
      const newIndex = (currentSlide + 1) % mergedThemes.length;
      carouselRef.current.goTo(newIndex);
      setCurrentSlide(newIndex);
      let seltheme = mergedThemes[newIndex];
      dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
      dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
    }
  };

  const leftOnclick = async () => {
    if (leftIsFirstSlide) {
      await GetLessTemplate();
      setPendingSlide(DefaultThemes.concat(OthersTheme).length - 1); // Ask to jump to last slide after fetch
    } else {
      const newIndex = (currentSlide - 1 + mergedThemes.length) % mergedThemes.length;
      carouselRef.current.goTo(newIndex);
      setCurrentSlide(newIndex);
      let seltheme = mergedThemes[newIndex];
      dispatch(changeThemeCreation({ formtype: 'edit', editdata: seltheme }));
      dispatch(changeSelectedTheme({ ThemeId: seltheme?.TemplatePreferenceId, ThemeName: seltheme?.ThemeName }));
    }
  };
  const CustomisedthemeSelection = async (seltheme) => {
    dispatch(changeActiveTheme(seltheme));
    if (seltheme == 'customised') {
      let themedtl = await dispatch(
        getTemplate({ CompId: CompId, BranchId: BranchId, AppId: AppId })
      ).unwrap();
      if (themedtl.data?.statusCode == 0) {
        // settemplateData({});
        dispatch(changeThemeCreation({ formtype: 'new' }));
      } else if (themedtl.data?.statusCode == 1) {
        // setTemptemplatedata(false);
      }
    } else {
      if (Object.keys(DefaultThemes)?.length > 0) {
        dispatch(changeSelectedTheme({ ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, ThemeName: DefaultThemes?.[0]?.ThemeName }));
        // settemplateData(DefaultThemes?.[0]);
        dispatch(changeThemeCreation({ formtype: 'edit', editdata: DefaultThemes?.[0] }));
      } else {
        dispatch(changeSelectedTheme({}));
        dispatch(changeThemeCreation({ formtype: 'new' }));

      }
    }
  }

  const handlesubmit = () => {
    const PostData = {};
    PostData['AppId'] = AppId;
    PostData['CompId'] = CompId;
    PostData['UserId'] = UserId;
    PostData['BranchId'] = BranchId;
    PostData['ColorId'] = colorFilteredArray;
    PostData['FontId'] = fontFilteredArray;
    PostData['CreatedBy'] = UserId;
  }
  const GetOthersTemplate = async () => {
    let OtherTemp = await dispatch(
      getOthersTemplate({ pagenumber: OthersCount })
    ).unwrap();
    if (OtherTemp?.data?.statusCode === 1) {
      let withname = OtherTemp.data?.data?.map((temp, index) => ({
        ...temp,
        ThemeName: `Theme ${index + 1 + OthersCount * 10 - 10}`,
      }));
      dispatch(changeOthersTheme(withname))
    } else {
    }
  };
  const GetMoreTemplate = async () => {
    setOthersCount(OthersCount + 1);
    let tempcount = OthersCount + 1;
    let OtherTemp1 = await dispatch(
      getOthersTemplate({ pagenumber: tempcount + 1 })
    ).unwrap();

    if (OtherTemp1?.data?.statusCode != 1) {
      isSetNext(false);
    }
    let OtherTemp = await dispatch(
      getOthersTemplate({ pagenumber: tempcount })
    ).unwrap();
    if (OtherTemp?.data?.statusCode === 1) {
      let withname = OtherTemp.data?.data?.map((temp, index) => ({
        ...temp,
        ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`,
      }));
      dispatch(changeOthersTheme(withname))

    } else {
      setMessageType('warning');
      setMessageData('No more templates');
    }
  };
  const GetLessTemplate = async () => {
    setOthersCount(OthersCount - 1);
    let tempcount = OthersCount - 1;
    let OtherTemp = await dispatch(
      getOthersTemplate({ pagenumber: tempcount })
    ).unwrap();
    if (OtherTemp?.data?.statusCode === 1) {
      let withname = OtherTemp.data?.data?.map((temp, index) => ({
        ...temp,
        ThemeName: `Theme ${index + 1 + (tempcount - 1) * 10}`,
      }));
      dispatch(changeOthersTheme(withname))

      isSetNext(true);
    } else {
    }
  };
  const clearOtherTemplate = async () => {
    dispatch(changeOthersTheme([]))
    setOthersCount(1);
  };
  return (
    <div className='SalesSetupMaster'>

      <div className="Salessetup-header">
        <h1 className="formHeader">
          <p> <MdOutlineDisplaySettings size={30} color='#2563eb' /> Sales Setup</p>
          <div>Customize your sales screen here </div>
        </h1>
        <div className="defaultandCustomisedThemeSales">
          <div
            className={activeTheme === 'default' ? 'selected' : ''}
            onClick={() => CustomisedthemeSelection('default')}
          >
            <HiOutlineSquares2X2 size={16} />
            Default Theme
          </div>
          <div
            className={activeTheme === 'customised' ? 'selected' : ''}
            onClick={() => CustomisedthemeSelection('customised')}
          >
            <HiSquaresPlus size={16} /> Customized Theme
          </div>

        </div>

        {activeTheme === 'default' &&
          <div className="Default-SubmitButton">
            <Buttons
              buttonText="Save"
              color="901D77"
               disabled = {addnewAccess}
              handleSubmit={handleMainSubmit}
              icon={<ArrowRightOutlined />}
            />
          </div>
        }
      </div>
      <div className='salesScreenView'
      >
        {activeTheme === 'default' ?
          <>
            <div
              className="default-Sales-dotted-box"
            >

              <Button
                icon={<LeftOutlined />}
                onClick={() => leftOnclick()}
                style={{
                  position: 'absolute',
                  top: '42%',
                  left: '15%',
                  zIndex: 2,
                  width: '40px',
                  height: '40px',
                  fontWeight: 'bold',
                  borderRadius: '50%',
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
                }}
              />
              <Button
                icon={<RightOutlined />}
                onClick={() => RightOnclick()}
                style={{
                  position: 'absolute',
                  top: '42%',
                  right: '13%',
                  zIndex: 2,
                  width: '40px',
                  height: '40px',
                  fontWeight: 'bold',
                  borderRadius: '50%',
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
                }}
              />
              <Carousel
                ref={carouselRef}
                dots={false}
                draggable={true}
                style={{ width: '100%', height: '100%', position: 'relative' }}
              // afterChange={handleCarouselChange}
              >
                {Object.keys(previewData)?.length > 0 ? (
                  renderPreviewLayout()
                ) : (
                  <div>
                    <Skeleton active />
                  </div>
                )}
              </Carousel>

            </div>

            <div style={{ display: 'none' }}>
              <SelectionComponent ref={childRef} />
            </div>
          </>
          :
          <>
            <div
              className="Sales-dotted-box"
              style={{ width: '55%', height: '85%', position: 'relative' }}
            >

              <Carousel
                ref={carouselRef}
                dots={false}
                draggable={true}
                style={{ width: '100%', height: '100%', position: 'relative' }}
              // afterChange={handleCarouselChange}
              >
                {Object.keys(previewData)?.length > 0 ? (
                  renderPreviewLayout()
                ) : (
                  <div>
                    <Skeleton active />
                  </div>
                )}
              </Carousel>
            </div>
            <div className='SelectionComponentImport'>
              <SelectionComponent ref={childRef} />
            </div>
          </>
        }
      </div>

    </div>
  );
};


export default BookingSelectionPage;