import { IAccordion, IAccordionItem } from './Accordion.interface'
import { colors, easeOutExpo } from '@/styles/variables'
import styled, { css } from 'styled-components'

import { fontSize } from '@/styles/utilities'

const themes = {
  dark: css`
    color: ${colors.white};
    border-top: 1px solid ${colors.gray50};
  `,
  light: css`
    color: ${colors.black};
    border-top: 1px solid ${colors.gray20};
  `,
  simple: css`
    color: ${colors.white};
  `
}
const itemTheme = {
  dark: css`
    border-top: 1px solid ${colors.gray50};
    color: ${colors.white};
  `,
  light: css`
    border-top: 1px solid ${colors.white};
    color: ${colors.black};
  `,
  simple: css`
    border-top: none;
    color: ${colors.white};
  `
}

export const StyledAccordionTitle = styled.div<Partial<IAccordionItem>>`
  ${props => (props.theme === 'simple' ? fontSize('h2') : fontSize('h5'))}
  display: flex;
  gap: 8px;
  justify-content: ${props => props.justify};
  align-items: center;

  cursor: pointer;
  transition: all 0.6s ${easeOutExpo};
  padding: 16px 8px;
  ${props => itemTheme[props.theme]}
`

export const StyledAccordionContent = styled.div<Partial<IAccordionItem>>`
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.6s linear;
`

export const StyledAccordionItem = styled.li<IAccordionItem>`
  background-color: transparent;
  color: ${colors.white};
  position: relative;
  width: 100%;
  /* border-top: 1px solid ${colors.gray50}; */
  transition: all 0.6s ${easeOutExpo};
  ${props => itemTheme[props.theme]}

  &:hover {
    & ${StyledAccordionTitle} {
      color: ${props =>
    props.theme === 'simple' ? colors.gray50 : colors.gray50};
    }
  }

  ${({ active }) =>
    active &&
    css`
      background-color: ${props =>
        props.theme === 'simple' ? 'transparent' : colors.gray80};
      & ${StyledAccordionTitle} {
        color: ${colors.white};

        & i {
          transform: translateY(-50%) rotate(180deg);
        }
      }
    `}
`

export const StyledAccordion = styled.ul<Partial<IAccordion>>`
  display: block;
  text-align: left;
  margin: auto;
  list-style: none;
  padding: 0;
  ${props => themes[props.theme]}
`

export const StyledAccordionWrapper = styled.div<Partial<IAccordion>>`
  ${props =>
    props.theme === 'simple'
      ? css`
          padding: 8px;
        `
      : css`
          padding: 24px 12px;
        `}
`

export const WrapIcon = styled.div<Partial<IAccordionItem>>`
  position: relative;
`