import {
  IDropdown,
  IDropdownContainer,
  IDropdownItem,
  IDropdownTitle
} from './Dropdown.interface'
import { colors, responsiveMedia, shadows } from '@/styles/variables'
import styled, { css } from 'styled-components'

export const StyledDropdown = styled.div<Partial<IDropdown>>`
  position: relative;
  display: inline-flex;
`

export const StyledDropdownTitle = styled.div<Partial<IDropdownTitle>>`
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  padding: 8px;
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.15s ease-in-out, background-size 400ms, transform 400ms; // Specify properties to be animated
  transition: all 400ms;
  min-width: fit-content;
  background-color: ${props => (props.open ? colors.white : css`transparent`)};

  ${props => (props.theme === 'dark' ? colors.gray50 : colors.black)};
  color: ${props => (props.theme === 'dark' ? colors.gray50 : colors.black)};

  border-bottom: ${props =>
    props.theme === 'dark'
      ? css`1px solid ${colors.white}`
      : css`1px solid ${colors.black}`};

  background-image: ${props =>
    props.theme === 'dark'
      ? css`linear-gradient(${colors.white}, ${colors.white})`
      : css`linear-gradient(${colors.black}, ${colors.black})`};

  color: ${props => {
    if (props.theme === 'dark') {
      return css`
        ${props.open ? colors.gray90 : colors.gray50}
      `
    } else if (props.theme === 'light') {
      return css`
        ${props.open ? colors.white : colors.black}
      `
    }
  }};
  background-color: ${props => {
    if (props.theme === 'dark') {
      return css`
        ${props.open ? colors.white : 'transparent'}
      `
    } else if (props.theme === 'light') {
      return css`
        ${props.open ? colors.black : colors.white}
      `
    }
  }};

  /* color: ${props => (props.open ? colors.black : colors.white)}; */
  & .icon {
    color: ${props => {
    if (props.theme === 'dark')
      return css`
          ${props.open ? colors.black : colors.white}
        `
    else if (props.theme === 'light')
      return css`
          ${props.open ? colors.white : colors.black}
        `
  }};
    transition: transform 400ms;
    transform: ${props =>
    props.open ? css`rotate(-180deg)` : css`rotate(-45deg)`};
  }

  &:hover {
    /* color: ${colors.black}; */
    color: ${props => (props.theme === 'dark' ? colors.black : colors.white)};

    background-size: 100% 100%; // to animation

    & .icon {
      color: ${props => (props.theme === 'dark' ? colors.black : colors.white)};
      transform: rotateZ(0);
    }
  }


  ${props =>
    props.theme === 'clear'
      ? css`
    background-color:transparent;
    transition:unset;
  color:${colors.gray50};
    background-size: unset;
    background-repeat: unset;
    transition: color 400ms;
    min-width: fit-content;
    background-color: transparent;
    border-bottom: 1px solid #212121;
    background-image: unset;
    background-color: transparent;
    transition: unset;
    border-bottom: transparent;
  
    .icon{
      color: currentColor;
    
    }
    
    &hover{
      color:currentColor;

      background-size: 0%; // to animation
    background-size: unset; // to animation
    linear-gradient(transparent, transparent)

    .icon{
      color:currentColor
    }
    }

    
    `
      : ''};
`

export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 8px;

  background: ${colors.black};
  color: ${colors.gray50};
  box-shadow: ${shadows.sm};

  opacity: ${props => (props.open ? 1 : 0)};
  pointer-events: ${props => (props.open ? 'auto' : 'none')};

  z-index: 1;
  transition: opacity 0.15s ease-in-out;

  border: 1px solid ${colors.gray90};
`
export const StyledDropdownItem = styled.li<IDropdownItem>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;


  text-align:center;

  cursor: pointer;
  transition: background-color 400ms;

  &:not(:first-child) {
    border-top: 1px solid ${colors.gray90};
  }

  &:hover {
    background-color: ${colors.gray70};
  }
`