import React, { useState } from 'react';
import { Modal } from 'app/shared/components/modal/modal';
import Checkbox from 'app/shared/components/checkbox/checkbox';
import { welcomePopupClose } from '../store/welcomePopup.actions';
import { useDispatch, useSelector } from 'react-redux';
import { selectWelcomePopupModalData } from '../store/welcomePopup.selectors';
import { WelcomePopupContent } from './WelcomPopupContent';
import { VideoPopup } from 'app/shared/components/videoPopup/videoPopup.jsx';

const WelcomeModal = () => {
  const [ dontShowChecked, setDontShowChecked ] = useState(false);
  const [ isVideoOpened, setIsVideoOpened ] = useState(false);
  const dispatch = useDispatch();

  const { isOpened = true, content } = useSelector(selectWelcomePopupModalData);

  const onCloseHandler = () => {
    dispatch(welcomePopupClose(!dontShowChecked));
  };

  const onDontShowChange = (checked) => {
    setDontShowChecked(checked);
  };

  const modalFooter = <div className={'o-layout u-vertical-align--center'}>
    <div className={'o-layout__item-8 u-align--left'}>
      <Checkbox
        extraClass={'u-color--paragraph-light'}
        labelText={'Do not show this message again'}
        onChange={onDontShowChange}
      />
    </div>
    <div className={'o-layout__item-4 u-align--right'}>
      <a className={'c-button c-button--login js-close-button-hit-area'}
        onClick={onCloseHandler}>Close</a>
    </div>
  </div>;

  return <>
    <VideoPopup
      videoUrl={content?.videoLink}
      isOpened={isVideoOpened}
      onClose={() => setIsVideoOpened(false)} />
    <Modal
      extraClass={'c-modal--lines-background'}
      contentExtraClass={'o-gutter-left--enormous u-margin-top--big'}
      footer={modalFooter}
      centered
      isOpened={isOpened}
      onOverlay={onCloseHandler}
    >
      {content ? <WelcomePopupContent
        releaseDate={content.releaseDate}
        title={content.title}
        description={content.description}
        changelog={content.changelog}
        incomingFeatures={content.incomingFeatures}
        footer={content.footer}
        imageUrl={content.imageUrl}
        videoLink={content.videoLink}
        openVideo={() => setIsVideoOpened(true)}
      /> : null}
    </Modal>
  </>;
};

export { WelcomeModal };