// @ts-nocheck
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import LoadingSpinner from '../../../components/LoadingSpinner';
import { useGetBadgeQuery } from '../../../features/badges/badgesApi';
import { setCompleteBadgeState } from '../../../features/badges/badgesSlice';
import { useGetFiltersQuery } from '../../../features/filters/filtersApi';
import FooterActions from './components/Common/FooterActions';
import GeneralSettings from './components/Common/GeneralSettings/GeneralSettings';
import PreviewBadge from './components/Common/PreviewBadge';
import ProductFilter from './components/Common/ProductFilter';
import SelectBadgeType from './components/Common/SelectBadgeType';
import Countdown from './components/Countdown/Countdown';
import CustomHtml from './components/CustomHtml/CustomHtml';
import CustomSettings from './components/CustomSettings/CustomSettings';
import ImageSettings from './components/ImageSettings/ImageSettings';

const BadgesEditor = () => {
  // caching filters
  // eslint-disable-next-line no-empty-pattern
  const {} = useGetFiltersQuery();

  const dispatch = useDispatch();
  const navigate = useNavigate();
  const badgeSettings = useSelector((state) => state.badges);
  const [skip, setSkip] = useState(true);
  const { state } = useLocation();
  const [searchParams] = useSearchParams();
  const badgeId = searchParams.get('id');
  const [loading, setLoading] = useState(true);
  const { data, isLoading, isError } = useGetBadgeQuery(badgeId, { skip });

  const renderSetting = (type) => {
    switch (type) {
      case 'custom':
        return <CustomSettings />;
      case 'image':
        return <ImageSettings />;
      case 'custom_html':
        return <CustomHtml />;
      case 'countdown':
        return <Countdown />;
    }
  };

  useEffect(() => {
    if (state && badgeId) {
      dispatch(setCompleteBadgeState(state.badge));
      setLoading(false);
    } else {
      if (badgeId) {
        setSkip(false);
      } else {
        setLoading(false);
      }
    }
  }, [state, badgeId]);

  useEffect(() => {
    if (data) {
      dispatch(setCompleteBadgeState(data));
      setLoading(false);
      setSkip(true);
    }
  }, [data]);

  useEffect(() => {
    if (isError) {
      navigate('/badges');
    }
  }, [isError]);

  if (loading || isLoading) {
    return (
      <div className='wmx-h-[420px] wmx-flex wmx-justify-center wmx-items-center'>
        <LoadingSpinner className='wmx-size-10' />
      </div>
    );
  }

  return (
    <div className='wmx-flex wmx-gap-4'>
      <div className='wmx-flex-grow wmx-pb-4'>
        <GeneralSettings />
        <div>
          <ProductFilter />
          <SelectBadgeType />
          {renderSetting(badgeSettings.badge_type)}
        </div>
      </div>

      <PreviewBadge />
      <FooterActions />
    </div>
  );
};
export default BadgesEditor;
