import React, { useState } from 'react';
import { connect } from 'react-redux';
import Styled from 'styled-components';
import { RegularInput } from '../../components/common/inputs/TextInput';
import { nameShortner } from '../../utils/helpers';
import { ModalWrapper } from '../modals/ModalWrapper.modal';
import FolderCard from '../../components/cards/FolderCard';
import { useToasts } from 'react-toast-notifications';
import {
  NofillButton,
  PrimaryButton,
} from '../../components/common/buttons/PrimaryBtn';
import {
  createFolder,
  getAllFolders,
} from '../../redux/action-creators/form-actions/forms.actions';

const FolderList = ({
  allFolders,
  createFolder,
  getAllFolders,
  showMore,
  onGetAllForms,
}) => {
  const [openFolderModal, setOpenFolderModal] = useState(false);
  const [creatingFolder, setCreatingFolder] = useState(false);
  const [newFolderName, setNewFolderName] = useState('');
  const [openMenu, setOpenMenu] = useState('');
  const { addToast } = useToasts();

  // const [activeIndex, setActiveIndex] = useState(0)

  const onCreateNewFolder = async e => {
    setCreatingFolder(true);
    e.preventDefault();
    const folderDetails = { name: newFolderName };
    const resData = await createFolder(folderDetails);
    if (resData?.success) {
      setOpenFolderModal(false);
      getAllFolders();
      addToast('New folder created', { appearance: 'success' });
    } else {
      addToast(resData?.error, { appearance: 'error' });
    }
    setCreatingFolder(false);
  };

  const onChangeOpenMenu = id => {
    if (openMenu === id) {
      setOpenMenu('');
    } else {
      setOpenMenu(id);
    }
  };

  return (
    <div>
      <ul className="grid mostly-4-fill">
        <AddFolder>
          <button
            className="folder-add-btn"
            onClick={() => setOpenFolderModal(true)}
          >
            <svg>
              <use href="/images/icons.svg#plus-round"></use>
            </svg>
            <span>Create Folder</span>
          </button>
          <ModalWrapper
            visible={openFolderModal}
            setvisible={setOpenFolderModal}
            title="Name your folder"
            height={290}
            width={500}
          >
            <form onSubmit={e => onCreateNewFolder(e)}>
              <div className="modal-body">
                <RegularInput
                  label="folder name"
                  required={true}
                  onchange={setNewFolderName}
                  placeholder="Enter your folder name"
                />
              </div>
              <div className="d-flx-alc-jfe modal-action-wrap">
                <NofillButton
                  type="button"
                  title="cancel"
                  onclick={() => setOpenFolderModal(false)}
                />
                <PrimaryButton
                  type="submit"
                  loading={creatingFolder}
                  text="Create Folder"
                />
              </div>
            </form>
          </ModalWrapper>
        </AddFolder>
        {allFolders?.folders?.map((folder, i) => {
          if (showMore) {
            return (
              <span key={i}>
                <FolderCard
                  openMenu={openMenu}
                  onGetAllForms={onGetAllForms}
                  onOpenMenu={onChangeOpenMenu}
                  folder={folder}
                  title={nameShortner(folder.name, 25)}
                />
              </span>
            );
          } else {
            if (i < 3) {
              return (
                <span key={i}>
                  <FolderCard
                    openMenu={openMenu}
                    onGetAllForms={onGetAllForms}
                    onOpenMenu={onChangeOpenMenu}
                    folder={folder}
                    title={nameShortner(folder.name, 25)}
                  />
                </span>
              );
            }
          }
        })}
      </ul>
    </div>
  );
};

export default connect(null, { getAllFolders, createFolder })(FolderList);

const AddFolder = Styled.li`
  background-color: #FFFFFF;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23E8EDFFFF' stroke-width='5' stroke-dasharray='2%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  &:hover{
      box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
  }
  .folder-add-btn{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60px;
      svg{
          width: 24px;
          height: 24px;
          color: var(--co-primary);
      }
      span{
          font-family: var(--ff-medium);
          font-weight: 500;
          font-size: 1.4rem;
          margin-left: 1rem;
          color: var(--co-body);
      }
  }
`;
