Untitled

import React, {useState, useContext, useEffect, useRef} from 'react';
import styled from 'styled-components/macro';
import {ReactComponent as DeleteTrashCan} from '../svgs/delete-trashcan.svg';
import Switch from '../Switch';
import ReactTooltip from 'react-tooltip';
import {PageContext} from '../Template/TemplateStore';

function CardWrapper({
  children,
  handleCancel,
  deleteComponent,
  newConfirm,
  props,
  created,
  checkForDuplicateTitles,
}) {
  const [required, setRequired] = useState(props.required);
  const {componentSetter, page} = useContext(PageContext);
  const {id} = props;
  const [description, setDescription] = useState(props.description);
  const [component, setComponent] = useState(props);
  const [componentProps] = useState(props);
  const ref = useRef();
  let [confirmDisabled, setConfirmDisabled] = useState(created);

  useEffect(() => {
    description.length > 0 && setConfirmDisabled(false);
  });

  useEffect(() => {
    const checkIfClickedOutside = (e) => {
      if (!confirmDisabled && ref.current && !ref.current.contains(e.target)) {
        handleConfirm();
      };
    };
    document.addEventListener("mousedown", checkIfClickedOutside);

    return () => {
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [confirmDisabled]);

  function handleToggle() {
    setRequired(!required);
    return setComponent({...component, required: !required});
  }

  function handleDescriptionChange(e) {
    if (e.target.value.length === 0) {
      setConfirmDisabled(true);
    }
    setDescription(e.target.value);
    return setComponent({
      ...component,
      description: e.target.value,
      placeholder: e.target.value,
    });
  }

  // capture mutations that occur within individual cards.
  function mountComponent(component) {
    setComponent({
      ...component,
      description: description,
      placeholder: description,
    });
  }

  function mountOptions(component) {
    console.log('MOUNTING OPTIONS:', component.options);
    let searchedFor = page.page_components.find((c) => c.id === component.id);
    let index = page.page_components.indexOf(searchedFor);
    page.page_components[index] = component;
    componentSetter(page, id, component);
  }

  function handleConfirm() {
    let sendingComponent = component;
    let searchedFor = page.page_components.find((c) => c.id === component.id);
    let index = page.page_components.indexOf(searchedFor);
    page.page_components[index] = component;
    newConfirm();
    componentSetter(page, id, sendingComponent);
    return checkForDuplicateTitles(component.id);
  }

  function closeAndReset(component) {
    return handleCancel();
  }

  return (
    <Wrapper ref={ref}>
      <AdminRow>
        {' '}
        <NameInput
          placeholder={'Type field name here'}
          value={description}
          name="description"
          onChange={handleDescriptionChange}
          type="text"
        />
        <RequiredSwitchContainer>
          <Switch
            isCreate={true}
            isOn={required}
            handleToggle={handleToggle}
            onColor="#48DD81"
          />
          <RequiredText>Required</RequiredText>
        </RequiredSwitchContainer>
        <TrashCanWrapper>
          {required ? (
            <>
              <div
                data-for="deleteDisabled"
                data-tip
                style={{
                  cursor: 'not-allowed',
                }}
              >
                <DeleteTrashCan />
              </div>
              <ReactTooltip id="deleteDisabled" type="dark" effect="solid">
                <span>This component is required</span>
              </ReactTooltip>
            </>
          ) : !created ? (
            <div onClick={() => deleteComponent(id)}>
              <DeleteTrashCan />
            </div>
          ) : null}
        </TrashCanWrapper>
      </AdminRow>
      <ComponentContentRow>
        <ComponentContentWrapper>
          {React.cloneElement(children, {
            componentProps,
            mountComponent,
            mountOptions,
            setDescription,
          })}
        </ComponentContentWrapper>{' '}
      </ComponentContentRow>
      <ConfirmCancelWrapper>
        <CancelButton onClick={() => closeAndReset(component)}>
          Cancel
        </CancelButton>
        {confirmDisabled ? (
          <div>
            <ConfirmButtonDisabled
              disabled={confirmDisabled}
              onClick={() => handleConfirm()}
            >
              <span data-for="confirmDisabled" data-tip>
                {' '}
                Confirm
              </span>
              <ReactTooltip id="confirmDisabled" type="dark" effect="solid">
                <span>Please rename your component first</span>
              </ReactTooltip>
            </ConfirmButtonDisabled>
          </div>
        ) : (
          <ConfirmButton
            disabled={confirmDisabled}
            type="submit"
            onClick={() => handleConfirm()}
          >
            {' '}
            Confirm
          </ConfirmButton>
        )}
      </ConfirmCancelWrapper>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  position: relative;
  display: block;
  width: 600px;
  padding: 15px 15px;
  min-height: 200px;
  border: 2px dashed HSL(197, 100%, 47%);
`;

const AdminRow = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const NameInput = styled.input`
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  border: none;
  font-family: Open Sans;
  font-style: italic;
  font-weight: 600;
`;

const RequiredSwitchContainer = styled.div`
  display: inline;
  font-size: 12px;
`;

const RequiredText = styled.span`
  display: inline-block;
  padding-top: 4px;
  padding-right: 5px;
`;

const ComponentContentRow = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
`;

const ComponentContentWrapper = styled.div`
  max-width: 60%;
`;

const TrashCanWrapper = styled.div`
  position: absolute;
  right: 35px;
  top: 85px;
  cursor: pointer;
`;

const ConfirmCancelWrapper = styled.div`
  position: absolute;
  display: flex;
  bottom: 10px;
  right: 15px;
`;

const CancelButton = styled.button`
  border: none;
  background: #ffffff;
  margin-right: 5px;
`;

const ConfirmButton = styled.button`
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 700;
  color: white;
  line-height: 16px;
  text-align: center;
  background: HSL(197, 100%, 47%);
  border-radius: 25px;
  border: none;
  box-shadow: none;
  padding: 8px 16px;
`;

const ConfirmButtonDisabled = styled(ConfirmButton)`
  opacity: 0.25;
`;

export default CardWrapper;