import React, { useState } from 'react';
import styled from 'styled-components';
import ChevronUp from '../../assets/icons/ChevronUp';

interface IProps {
  collapsedContent: React.ReactNode;
  children: React.ReactNode;
}

function CollapsableForm(props: IProps) {
  const [isExpanded, setIsExpanded] = useState<boolean>(true);
  return (
    <MainContainer>
      <CardHeader>
        <CollapsedContent>
          {props.collapsedContent}
          <Container>
            <Text onClick={() => setIsExpanded(prev => !prev)}>
              {isExpanded ? 'COLLAPSE' : 'SHOW'}
            </Text>
            <IconContainer
              onClick={() => setIsExpanded(prev => !prev)}
              isExpanded={isExpanded}
            >
              <ChevronUp />
            </IconContainer>
          </Container>
        </CollapsedContent>
      </CardHeader>
      {isExpanded && (
        <CustomizedFormSection>
          <ExpandedContent>{props.children}</ExpandedContent>
        </CustomizedFormSection>
      )}
    </MainContainer>
  );
}

const CustomizedFormSection = styled.div`
  display: flex;
  background: #ffffff;
  padding: 12px;
  flex-direction: column;
  gap: 14px;
  border: 1px solid #f0f2f2;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
`;

const CardHeader = styled.div`
  border: 1px solid #f0f2f2;
  background-color: #f8fafc;
  color: #3a3630;
  font-size: 16px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
`;

const Text = styled.span`
  font-size: 14px;
  color: #3a3630;
  font-weight: 500;
  font-family: 'lato', sans-serif;
  cursor: pointer;
`;

const Container = styled.div`
  display: flex;
  gap: 10px;
  align-items: center;
`;

const MainContainer = styled.div`
  gap: 0;
`;

const IconContainer = styled.div<{ isExpanded: boolean }>`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0px 1px 2px 0px #1018280d;
  &:hover {
    background: rgba(58, 54, 57, 0.05);
  }
  svg {
    transform: rotate(${props => (props.isExpanded ? '360deg' : '180deg')});
  }
`;

const ExpandedContent = styled.div``;

const CollapsedContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
`;

export default CollapsableForm;
