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

const DefaultListItemWrapper = styled.li.withConfig({
    shouldForwardProp: convertToTransientProps([
        'prefixWidth',
        'dividerStartsFromText',
        'divider',
    ]),
}) `
  cursor: ${(props) => props.disabled ? 'not-allowed' : props.onClick ? 'pointer' : 'default'};
  display: flex;
  position: relative;
  width: 100%;
  min-height: ${getSpacing('s08')};
  padding: ${getSpacing('s02')};
  background-color: ${getColorAlias('containerDefault')};
  color: ${(props) => props.state === 'unavailable' || props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentDefault')};
  list-style-type: none;

  span {
    color: ${(props) => props.disabled && getColorAlias('contentDisabled')};
  }

  ${(props) => props.state === 'default' &&
    css `
      &:hover {
        background-color: ${getDarkenColor('hover01', 'containerDefault')};
      }
    `}
  svg {
    fill: ${(props) => props.state === 'unavailable' || props.disabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentDefault')};
  }

  ${({ divider, theme, prefixWidth, dividerStartsFromText }) => divider &&
    css `
      &::before {
        content: '';
        ${dividerStartsFromText
        ? css `
              width: calc(100% - ${prefixWidth}px - ${getSpacing('s04')});
            `
        : css `
              width: 100%;
            `};
        height: 1px;
        background-color: ${getColorAlias('borderDefault', theme)};
        position: absolute;
        right: 0;
        bottom: 0;
      }
    `}
`;
const CompactListItemWrapper = styled(DefaultListItemWrapper) `
  min-height: ${getSpacing('s07')};
`;
const MultiLineListItemWrapper = styled(DefaultListItemWrapper) `
  min-height: ${getSpacing('s09')};
`;
const ListItemFlexContainer = styled.div `
  display: flex;
  flex-flow: row nowrap;
  align-items: ${({ variant }) => variant === 'multi-line' ? 'flex-start' : 'center'};
  flex: 1;
`;
styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['type']),
}) `
  height: 100%;
  padding-inline: ${getSpacing('s02')};
  display: flex;
  align-items: ${(props) => (props.type === 'action' ? 'baseline' : 'center')};
  justify-content: center;

  div {
    margin: 0;
  }

  svg {
    ${getFontSize('size20')};
    fill: ${getColorAlias('interactivePrimary')};
  }

  img {
    ${(props) => props.type === 'thumbnail'
    ? css `
            height: ${getSpacing('s09')};
            width: ${getSpacing('s09')};
          `
    : css `
            height: ${getSpacing('s07')};
            width: ${getSpacing('s07')};
          `}
    object-fit: cover;
    ${(props) => props.type === 'avatar' &&
    css `
        clip-path: circle();
      `}
  }
`;
styled.div `
  padding-inline: ${getSpacing('s02')};
  flex: 1 2 60%;
  flex-direction: column;
`;
const ListItemPrimaryText = styled.p `
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
`;
const ListItemSecondaryText = styled(ListItemPrimaryText) `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentSubdued')};
  -webkit-line-clamp: 2;
`;
const sharedSuffixPositioning = css `
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
`;
styled(ListItemSecondaryText) `
  ${getFontSize('size14')};
  ${sharedSuffixPositioning}
  align-self: baseline;
`;
styled.div `
  ${sharedSuffixPositioning}
  flex-basis: 25%;
  svg {
    ${getFontSize('size24')};
    fill: ${getColorAlias('interactivePrimary')};
  }
`;

export { CompactListItemWrapper, DefaultListItemWrapper, ListItemFlexContainer, ListItemPrimaryText, ListItemSecondaryText, MultiLineListItemWrapper };
