import React, { useState, useEffect } from 'react';

import {
  Wrapper, Label, ContentWrapper, Content,
} from './styled';

type Props = {
  label: React.ReactNode;
  children?: React.ReactNode;
  isActive?: boolean;
};

const Collapse: React.FunctionComponent<Props> = ({
  label = '',
  children = '',
  isActive = false,
}: Props) => {
  const [isCollapse, setCollapse] = useState(true);

  const handleClick = (): void => {
    setCollapse(!isCollapse);
  };

  useEffect(() => {
    setCollapse(!isActive);
  }, [isActive]);

  return (
    <Wrapper>
      <Label onClick={handleClick}>
        {label}
      </Label>
      { children ? (
        <ContentWrapper isCollapse={isCollapse}>
          <Content>
            {children}
          </Content>
        </ContentWrapper>
      ) : null}
    </Wrapper>
  );
};

export default Collapse;