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,
  WithHocTitle,
  WithHocToggle,
} from '../../hoc';

import logo from '../../assets/img/logo.svg';
import sdwLogo from '../../assets/img/logo.png';
import './App.scss';

export const App = ({
  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 (
    <>
      <main className='App-main'>
        <div className='cont'>
          <img
            src={sdwLogo}
            className='sdw-logo d-block mg-auto'
            alt='SDW logo'
          />

          <img src={logo} className='App-logo' alt='logo' />
          <p>Edit <code>src/App.tsx</code> and save to reload.</p>

          <a
            className='App-link'
            href='https://reactjs.org'
            target='_blank'
            rel='noopener noreferrer'
          >
            Learn React
          </a>
        </div>
      </main>
    </>
  );
};

export const AppWithHoc = WithHocTitle(
  WithHocAuth(
    WithHocForm(
      WithHocToggle(
        WithHocSearch(
          WithHocSearchParams(
            WithHocNavigate(App)
          )
        )
      )
    )
  )
);