import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { NavLink, Switch, Route } from 'react-router-dom';
import List from 'components/routes/Forms/List';
import Manage from 'components/routes/Forms/Manage';
import CustomIcon from 'components/items/CustomIcon';
import ModuleButton from 'components/items/ModuleButton';
import Detail from 'components/routes/Forms/Detail';
import styleIdentifiers from './forms.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type FormsProps = StateProps & DispatchProps & OwnProps;

const Forms = (props: FormsProps) => {
  const {
    getAllForms,
    forms,
    history,
    sideMenuShow,
    sideMenuHide,
    deleteOneForm,
    dialogShow,
  } = props;

  useEffect(() => {
    getAllForms();
  }, []);

  function deleteItem(item: Record<string, any>) {
    dialogShow({
      id: 'confirm',
      title: 'admin.addForm.delete',
      messages: 'admin.addForm.confirmDelete',
      action: {
        color: 'primary',
        value: () => {
          deleteOneForm({
            id: item._id,
            callback: () => {
              history.push('/forms');
              sideMenuHide('right');
            },
          });
        },
      },
    });
  }

  function showOptions(item) {
    sideMenuShow({
      id: 'right',
      content: (
        <div className={styles('sideMenu')}>
          <h2 className={styles('title')}>
            <TextItem path="Options" />
          </h2>
          <ModuleButton
            color="primary"
            label="admin.addForm.edit"
            action={() => {
              history.push(`/forms/${item._id}/manage`);
              sideMenuHide('right');
            }}
          />
          <ModuleButton color="red" label="admin.addForm.delete" action={() => deleteItem(item)} />
        </div>
      ),
    });
  }

  return (
    <div className={styles('Forms')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav-content')}>
          {forms &&
            forms.data &&
            forms.data.map((item, key) => (
              <div className={styles('item-wrapper')} key={key}>
                <NavLink
                  to={`/forms/${item._id}`}
                  className={styles('item', 'link-wrapper')}
                  activeClassName={styles('state-active')}
                >
                  <span>{item.title}</span>
                </NavLink>
                <div className={styles('edit')} onClick={() => showOptions(item)}>
                  <CustomIcon className={styles('icon')} icon="pen" />
                </div>
              </div>
            ))}
        </div>
        <div className={styles('nav-footer')}>
          <div
            className={styles('nav-footer-content')}
            onClick={() => history.push('/forms/create')}
          >
            <TextItem path="admin.buttons.addForm" />
          </div>
        </div>
      </div>
      <Switch>
        <Route exact path="/forms/create" component={Manage} />
        <Route exact path="/forms/:id/manage" component={Manage} />
        <Route exact path="/forms/:id/:itemId" component={Detail} />
        <Route exact path="/forms/:id" component={List} />
      </Switch>
    </div>
  );
};

export default Forms;
