import styled, { css } from 'styled-components';
import 'react';
import ChevronDown from '../../icons/ChevronDown.js';
import { convertToTransientProps, getDefaultTransition, getColorAlias, getFontSize, getSpacing, getDarkenColor } from '../../utils/index.js';

const CollapsableContainer = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['isCollapsed']),
}) `
  max-height: ${(props) => (props.isCollapsed ? '0' : 'min-content')};
  overflow: hidden;
  ${getDefaultTransition()};
`;
const AccordionContent = styled(CollapsableContainer)((props) => css `
    color: ${getColorAlias('contentSubdued')};
    width: 100%;
    white-space: pre-line;
    ${getFontSize('size16')};

    ${props.isCollapsed
    ? css `
          padding: ${getSpacing('s00', 's04')};
          visibility: hidden;
          opacity: 0;
        `
    : css `
          padding: ${getSpacing('s02', 's04')};
          visibility: visible;
          opacity: 1;
        `}
  `);
const AccordionChevron = styled(ChevronDown) `
  fill: ${getColorAlias('contentDefault')};
  height: 18px;
  transform: rotate(-180deg);
  width: 18px;
  ${getDefaultTransition('transform')};
`;
const AccordionHeader = styled.button.withConfig({
    shouldForwardProp: convertToTransientProps(['isCollapsed']),
})((props) => css `
    background: ${getColorAlias('containerDefault')};
    border: 2px solid transparent;
    cursor: pointer;
    margin: 0;
    padding: 12px ${getSpacing('s04')};
    ${getDefaultTransition('background-color')};
    width: 100%;

    &:hover {
      background: ${getDarkenColor('hover01', 'containerDefault')};
    }

    &:active {
      background: ${getDarkenColor('active01', 'containerDefault')};
    }

    &:focus {
      border-color: ${getColorAlias('focusOuter')};
    }

    &:disabled {
      background: ${getColorAlias('containerDefault')};
      cursor: default;
    }

    ${props.isCollapsed &&
    css `
      ${AccordionChevron} {
        transform: rotate(0);
      }
    `}
  `);
function getTitleStyleByVariant(variant) {
    switch (variant) {
        case 'default':
            return css `
        font-weight: ${(props) => props.theme.font.weightExtrabold};
        ${getFontSize('size20')};
      `;
        case 'low-emphasis':
            return css `
        font-weight: ${(props) => props.theme.font.weightRegular};
        ${getFontSize('size16')};
      `;
    }
}
const AccordionHeaderPrimaryRow = styled.div `
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
`;
const AccordionHeaderTitle = styled.span `
  align-items: center;
  color: ${getColorAlias('contentDefault')};
  display: flex;
  flex-flow: row nowrap;
  ${(props) => getTitleStyleByVariant(props.variant)};

  span {
    display: flex;
    align-items: center;
  }

  svg {
    fill: ${getColorAlias('contentDefault')};
    margin-right: ${getSpacing('s04')};
  }
`;
const AccordionHeaderSecondaryRow = styled.div `
  align-items: center;
  color: ${getColorAlias('contentSubdued')};
  display: flex;
  flex-flow: row nowrap;
  font-weight: ${(props) => props.theme.font.weightRegular};
  margin-top: ${getSpacing('s01')};
  ${getFontSize('size16')};
`;
const AccordionWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['hasDivider']),
}) `
  background: ${getColorAlias('containerDefault')};
  border-bottom: 1px solid;
  border-color: ${(props) => props.hasDivider ? getColorAlias('dividerDefault') : 'transparent'};
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
`;

export { AccordionChevron, AccordionContent, AccordionHeader, AccordionHeaderPrimaryRow, AccordionHeaderSecondaryRow, AccordionHeaderTitle, AccordionWrapper, CollapsableContainer };
