import styled from 'styled-components';

import Sizes from '../Sizes';
import Colors from '../Colors';
import TextHelper from '../TextHelper';

interface IAccordionProps {
  active: boolean;
  initialHeight: number;
  forwardedRef: React.RefObject<any>;
}

const containerHeight = ({ children }: HTMLElement) => children[0].clientHeight + children[1].clientHeight;

export const Wrapper = styled.div<IAccordionProps>`
  transition: all .25s ease-in-out;
  height: ${({ initialHeight }) => `${initialHeight}px;`}
  ${({ active, forwardedRef: { current } }) => 
    (active && `
      height: ${containerHeight(current as HTMLElement)}px;

      & .content {
        opacity: 1;
      }
    `)
  }
`;

export const Header = styled.div<{ active: boolean }>`
  line-height: 1.2;
  font-size: 20px;
  font-family: ${TextHelper.fontVariant('medium')};
  padding: ${Sizes.s3}px 0;
  position: relative;
  border-bottom: 1px solid ${Colors.line};
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  svg {
    margin-left: 109px;

    path {
      stroke-width: 1.25px;
    }
  }

  & .label-icons {
    display: inline-flex;
    align-items: center;
  }

  ${({ active }) => active && `color: ${Colors.mongeral};`}
`;

export const Content = styled.div.attrs({
  className: 'content'
})`
  padding: ${Sizes.s4}px;
  border-right: 1px solid ${Colors.line};
  border-bottom: 1px solid ${Colors.line};
  border-left: 1px solid ${Colors.line};
  opacity: 0;
  transition: all .14s ease-in-out;

  @media screen and (max-width: 768px) {
    padding: ${Sizes.s3}px;
  }
`;