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

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);
      }
  }
`;
