import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../hooks';

import {
  AuthType,
  FilterDataType,
  HandleFormDataChangeType,
  HandleFormikDataChangeType,
  HandleNavigateType,
  HandleSearchTriggerType,
  HandleSearchType,
  HandleToggleOffType,
  HandleToggleOnType,
  HandleToggleType,
  IsToggledType,
  QueryFilterDataType,
  SearchParamsType,
  ToggleClassType,
  ToggleRefType,
  WithHocAuth,
  WithHocForm,
  WithHocNavigate,
  WithHocSearch,
  WithHocSearchParams,
  WithHocToggle,
} from '../../hoc';

import './{{pascalCase name}}.scss';

export const {{pascalCase name}} = ({
  auth,
  handleFormDataChange,
  handleFormikDataChange,
  isToggled,
  toggleClass,
  handleToggle,
  handleToggleOn,
  handleToggleOff,
  toggleRef,
  handleSearch,
  handleSearchTrigger,
  filterData,
  searchParams,
  queryFilterData,
  handleNavigate,
}: {
  // WithHocAuth
  auth: AuthType;

  // WithHocForm
  handleFormDataChange: HandleFormDataChangeType;
  handleFormikDataChange: HandleFormikDataChangeType;

  // WithHocToggle
  isToggled: IsToggledType;
  toggleClass: ToggleClassType;
  handleToggle: HandleToggleType;
  handleToggleOn: HandleToggleOnType;
  handleToggleOff: HandleToggleOffType;
  toggleRef: ToggleRefType;

  // WithHocSearch
  handleSearch: HandleSearchType;
  handleSearchTrigger: HandleSearchTriggerType;
  filterData: FilterDataType;

  // WithHocSearchParams
  searchParams: SearchParamsType;
  queryFilterData: QueryFilterDataType;

  // WithHocNavigate
  handleNavigate: HandleNavigateType;
}) => {
  const dispatch = useAppDispatch();

  return (
    <{{lowerCase element}}>
      <div className='cont'>
        <p className='fs-50 talign'>This is {{pascalCase name}} Component.</p>
      </div>
    </{{lowerCase element}}>
  );
};

export const {{pascalCase name}}WithHoc = WithHocAuth(
  WithHocForm(
    WithHocToggle(
      WithHocSearch(
        WithHocSearchParams(
          WithHocNavigate({{pascalCase name}})
        )
      )
    )
  )
);