import React from 'react';
import s from './ModalState.module.scss';
import { useStoreDispatch, useStoreSelector } from '../../../App';
import { SetModal } from '../../../store/actions/Settings';
import {
  getModalInfoByName,
  getModalParametersByName,
} from '../../../store/selectors/selectors';
import { ArStep1 } from '../ArStep1/ArStep1';
import { modalName } from '../../../store/reducers/Settings';
import { ModalComponent } from '../ModalComponent/ModalComponent';
import { ItemHint } from './../ItemHint/ItemHint';
import { MailComponent } from './../MailComponent/MailComponent';
import { MailSent } from '../MailSent/MailSent';
import { Loader } from '../Loader/Loader';

export const ModalState = () => {
  const dispatch = useStoreDispatch();
  const parameters = useStoreSelector(getModalParametersByName);
  const arStep1 = useStoreSelector(getModalInfoByName('arStep1'));
  const itemHint = useStoreSelector(getModalInfoByName('itemHint'));
  const mailComponent = useStoreSelector(getModalInfoByName('MailComponent'));
  const mailSent = useStoreSelector(getModalInfoByName('MailSent'));
  const loader = useStoreSelector(getModalInfoByName('loader'));

  const closeFunc = (name: modalName) => {
    dispatch(SetModal({ list: { [name]: false } }));
  };

  return (
    <>
      {arStep1 && (
        <ModalComponent
          otherClassForWrapper={s.arStepWrapper}
          closeFunc={() => closeFunc('arStep1')}
        >
          <ArStep1 {...parameters} />
        </ModalComponent>
      )}
      {itemHint && (
        <ModalComponent
          otherClassForWrapper={s.hintWrapper}
          position={parameters}
          closeFunc={() => closeFunc('itemHint')}
        >
          <ItemHint {...parameters} />
        </ModalComponent>
      )}
      {mailComponent && (
        <ModalComponent
          otherClassForWrapper={s.mailpWrapper}
          closeFunc={() => closeFunc('MailComponent')}
        >
          <MailComponent {...parameters} />
        </ModalComponent>
      )}
      {mailSent && (
        <ModalComponent
          otherClassForWrapper={s.mailpWrapper}
          closeFunc={() => closeFunc('MailSent')}
        >
          <MailSent {...parameters} />
        </ModalComponent>
      )}
      {loader && (
        <ModalComponent otherClassForWrapper={s.loaderWrapper}>
          <Loader {...parameters} />
        </ModalComponent>
      )}
    </>
  );
};