import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import app from 'store/app';
import styleIdentifiers from './ProjectModal.module.scss';
import ProjectButton from '../ProjectButton';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProjectModalProps = StateProps & DispatchProps & OwnProps;

const ProjectModal = (props: ProjectModalProps) => {
  const {
    id,
    message,
    title,
    button,
    buttonRight,
    action,
    actionRight,
    children,
    actionBottom,
    buttonBottom,
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();
  const dialogHide = data => dispatch(app.actions.dialog.hide.action(data));

  const actionButtonLeft = () => {
    dialogHide(id || 'custom');
    if (typeof action === 'function') action();
  };

  const actionButtonRight = () => {
    dialogHide(id || 'custom');
    if (typeof actionRight === 'function') actionRight();
  };
  const actionButtonButtom = () => {
    dialogHide(id || 'custom');
    if (typeof actionBottom === 'function') actionBottom();
  };
  const content = (
    <div className={styles('content')}>
      <TextItem
        tag="div"
        path={title || 'general.actions.confirmTitle'}
        className={styles('title')}
      />
      <TextItem tag="div" path={message} className={styles('message')} />
      <div className={styles('actions')}>
        <ProjectButton
          noMargin
          action={actionButtonLeft}
          label={button || 'general.actions.cancel'}
          color={actionRight ? 'border-primary' : 'primary'}
        />
        {actionRight && (
          <ProjectButton
            noMargin
            action={actionButtonRight}
            label={buttonRight || 'general.actions.confirm'}
            color="primary"
          />
        )}
      </div>
      {actionBottom && (
        <div onClick={actionButtonButtom} className={styles('bottom-action')}>
          <TextItem path={buttonBottom} />
        </div>
      )}
    </div>
  );

  return (
    <div className={styles('project-modal')}>
      {children}
      {!children && content}
    </div>
  );
};

export default ProjectModal;
