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;