import { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import { Redirect, useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';
import Header from './header';
import Footer from './footer';
import Loader from '../../shared/loader';
import ScrollToTop from '../../shared/buttons/scroll-to-top';
import ConfirmModal from '../../shared/confirm-modal';
import { updateStudentNotify } from '../../../redux/actions/student';
import CreateStudentForm from './create-student-form';
import { isAnonymous, isExactAuthenticated, isLoading, isStudent } from '../../../redux/utils/auth';

function MainLayout(props) {
  const { title, description, loginRequired } = props;

  const location = useLocation();
  const currentURL = `${location.pathname}${location.search.replace('&', ';')}`;

  useEffect(() => {
    if (title) document.title = title;
    if (description) document.description = description;
  }, [title, description]);

  if (loginRequired && isAnonymous(props.authStatus)) {
    return <Redirect to={`/login?next=${currentURL}`} />;
  }

  return (
    <Fragment>
      <div className='flex h-screen flex-col'>
        <Header />
        <main className='container relative m-auto flex-1 py-4'>{renderContent(props)}</main>
        <Footer />
      </div>
      <ScrollToTop withFooter={props.withFooter} />
      <ConfirmModal
        showModal={props.notify === null}
        header='اطلاع رسانی پیامکی سامانه فلش کارت های مدمشاور'
        content={
          <div>
            <p>
              با توجه به فعال شدن امکان اطلاع رسانی پیامکی سامانه فلش کارت‌های مدمشاور، از این پس
              فعال شدن پکیج‌های جدید و کدهای تخفیف، از طریق پیامک اطلاع رسانی خواهد شد.
            </p>
            <p>
              آیا مایل به دریافت
              <span className='font-medium'> پیامک های اطلاع رسانی </span>
              سامانه فلش کارت‌های مدمشاور هستید؟
            </p>
          </div>
        }
        onConfirm={props.updateStudentNotify.bind(null, true)}
        onCancel={props.updateStudentNotify.bind(null, false)}
      />
    </Fragment>
  );
}

function renderContent(props) {
  const { authStatus, loginRequired } = props;
  if (loginRequired && isLoading(authStatus)) {
    return (
      <div>
        <Loader />
      </div>
    );
  }
  if (loginRequired && isExactAuthenticated(authStatus)) {
    return (
      <div className='mx-auto w-full w-full sm:w-3/4 lg:w-2/3 2xl:w-1/2'>
        <CreateStudentForm />
      </div>
    );
  }
  if (!loginRequired || isStudent(authStatus)) return props.children;
}

MainLayout.defaultProps = {
  loginRequired: true,
  withFooter: false
};

MainLayout.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  loginRequired: PropTypes.bool.isRequired,
  authStatus: PropTypes.string.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  withFooter: PropTypes.bool.isRequired,
  notify: PropTypes.bool,
  updateStudentNotify: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  return {
    authStatus: state.auth.status,
    notify: state.student.data?.notify
  };
}

export default connect(mapStateToProps, { updateStudentNotify })(MainLayout);
