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

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ModuleDropActions from 'components/pageItems/ModuleDropActions';
import { viewConfig } from 'config/general';
import { useDispatch, useSelector } from 'react-redux';
import { withRouter } from 'react-router-dom';
import ModuleButton from 'components/items/ModuleButton';
import { IoIosArrowBack } from 'react-icons/io';
import { FormSpy } from 'react-final-form';
import CustomIcon from 'components/items/CustomIcon';
import styleIdentifiers from './GenericHeader.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface GenericHeader {}

const GenericHeader = (props: GenericHeaderProps) => {
  const {
    className,
    title,
    noBack,
    deleteAction,
    editAction,
    detailAction,
    saveButton,
    saveAction,
    actions,
    history,
    otherActions,
    noCancel,
    loading,
    id,
    status,
    pageInfo,
    label,
    noSubmit,
    submitLabel,
    children,
  } = props;

  // Allow to dispatch actions
  const dispatch = useDispatch();

  let numActions = actions?.length || 0;
  if (detailAction) numActions++;
  if (editAction) numActions++;
  if (deleteAction) numActions++;

  const handleAction = action => {
    if (action.type === 'link') {
      action.action(pageInfo);
    } else {
      dispatch(action.action(pageInfo, dispatch));
    }
  };

  return (
    <div className={styles(className, 'generic-header')}>
      <div className={styles('left-part')}>
        {!noBack && (
          <div className={styles('back')} onClick={() => history.goBack()}>
            <IoIosArrowBack />
          </div>
        )}
        <h1>
          {title}
          {id && <span className={styles('id')}>{id}</span>}
        </h1>
        {status}
      </div>
      <div className={styles('actions')}>
        {numActions === 1 && detailAction && (
          <ModuleButton noMargin relative label="admin.buttons.detail" action={detailAction} />
        )}
        {numActions === 1 && editAction && (
          <ModuleButton noMargin relative label="admin.buttons.edit" action={editAction} />
        )}
        {numActions === 1 && deleteAction && (
          <ModuleButton
            noMargin
            relative
            label="admin.buttons.delete"
            color="red"
            action={deleteAction}
          />
        )}
        {saveButton && numActions === 0 && !noCancel && (
          <ModuleButton
            noMargin
            relative
            label="admin.buttons.cancel"
            color={viewConfig.colorBack}
            action={() => history.goBack()}
          />
        )}
        {saveButton && !noSubmit && (
          <FormSpy>
            {({ submitting, valid }) => (
              <ModuleButton
                disabled={!valid || submitting}
                label={submitLabel || 'admin.buttons.submit'}
                loading={loading?.update || loading?.add}
                noMargin
                colorModule={viewConfig.colorSubmit}
                relative
                type="submit"
              />
            )}
          </FormSpy>
        )}
        {saveAction && !noSubmit && (
          <ModuleButton
            label={submitLabel || 'admin.buttons.submit'}
            loading={loading.update || loading.add}
            noMargin
            colorModule={viewConfig.colorSubmit}
            relative
            action={saveAction}
          />
        )}
        {numActions > 1 && (
          <ModuleDropActions
            label={label || 'Actions'}
            colorModule="primary"
            toggleContent
            buttonComponent
            className={styles('dropdown')}
          >
            <div className={styles('actions-items')}>
              {actions?.map((action, index) => {
                return (
                  <div
                    className={styles('item', action.type)}
                    key={index}
                    onClick={() => handleAction(action)}
                  >
                    {action?.icon && (
                      <CustomIcon className={styles('action-item-icon')} icon={action.icon} />
                    )}
                    <TextItem path={action.label || action.title} />
                  </div>
                );
              })}
              {actions?.length > 0 && (detailAction || editAction || deleteAction) && (
                <div className={styles('sep')} />
              )}
              {detailAction && (
                <div className={styles('item')} onClick={detailAction}>
                  <TextItem path="admin.buttons.detail" />
                </div>
              )}
              {editAction && (
                <div className={styles('item')} onClick={editAction}>
                  <TextItem path="admin.buttons.edit" />
                </div>
              )}
              {deleteAction && (
                <div className={styles('item', 'red')} onClick={deleteAction}>
                  <TextItem path="admin.buttons.delete" />
                </div>
              )}
            </div>
          </ModuleDropActions>
        )}
        {children}
        {otherActions}
      </div>
    </div>
  );
};

export default withRouter(GenericHeader);
