import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
// import FormCard from '../cards/FormCard';
import FormCard from '../../components/cards/FormCard';
import { ChildCreateButton } from '../../components/common/buttons/CreateButton';

const FormList = ({ allForms, activeFolder }) => {
  const [openedAction, setOpenAction] = useState('');

  const onOpenActionState = id => {
    if (openedAction === id) {
      setOpenAction('');
    } else {
      setOpenAction(id);
    }
  };

  return (
    <ul className="grid mostly-4-fill">
      {!activeFolder?._id?.length > 0 ? (
        <AddForm>
          <Link to="/builder/build">
            <ChildCreateButton
              title="New Form"
              appearance="#E8EDFF"
              svg="plus-round-alt"
            />
          </Link>
        </AddForm>
      ) : null}
      {allForms?.forms?.map((form, i) => {
        return (
          <FormCard
            key={i}
            openMenu={onOpenActionState}
            openedAction={openedAction}
            formDetails={form}
            activeFolder={activeFolder._id}
            form={form}
          />
        );
      })}
    </ul>
  );
};

export default FormList;

const AddForm = styled.li`
  background: #e8edff;
  border: 2px dashed #e8edff;
  padding: 0.8rem;
  color: var(--co-primary);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  width: 100%;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  &:hover {
    box-shadow: 0px 10px 70px rgba(224, 228, 237, 0.7);
  }
  svg {
    width: 40px;
    height: 40px;
    color: var(--co-primary);
  }

  span {
    font-family: var(--ff-sbold);
    color: #0a1045;
    font-weight: 600;
    font-size: 18px;
    line-height: 29px;
    margin-top: 2rem;
  }
`;
