import styled from 'styled-components';
import {bgColors, fontColors} from '../../../../colors';

export const SinglePlaylistItemBoxInner = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 2px 3px;
`;

const bgItemColor = (index: number, activeItem: number, error: boolean) => {
  // ${props => props.index === props.activeItem ? '#333' : ( props.index%2 ? '#fff' : '#eee') };
  if( index === activeItem ) 
    return '#333';
  if ( error ) 
    return bgColors.transparent_red;
  return index%2 ? '#fff' : '#eee';
}

export const SinglePlaylistItemBox = styled.div<{ index: number, activeItem: number, error: boolean }>`
  background: ${props => bgItemColor(props.index, props.activeItem, props.error)};
  color: ${props => props.index === props.activeItem ? '#FFF' : fontColors.main};
  font-size: 14px;
  height: 28px;
  overflow: hidden;
  ${props => props.index !== props.activeItem && `
    &:hover {
      background: #ddd;
      cursor: pointer;
      color: ${fontColors.main};
    }
  `}
`;

export const SinglePlaylistCounter = styled.div`
  flex: 0 1 25px;
  text-align: right;
  padding-right: 4px;
`;

export const SinglePlaylistName = styled.div`
  flex: 1;
`;

export const SinglePlaylistSkipButtonBox = styled.div`
  flex: 0 1 40px;
`;

export const SinglePlaylistTimes = styled.div`
  flex: 0 1 40px;
`;