import styled, { css } from 'styled-components';

import { StyledIcon } from '../../Icon/StyledIcon';
import { getBreakpointValue } from '../../../utils/responsiveBreakpoints';

const StyledDropdownButton = styled.button<{ themeActive: boolean }>`
  margin: 0;
  padding: ${({ theme }) => theme.space.table.filterButtonPadding};
  height: ${({ theme }) => theme.sizes.table.filterButton};
  border: ${({ theme }) => `${theme.borderWidths.table.filterButton} solid`};
  font-size: ${({ theme }) => theme.fontSizes.table.filterButton};
  font-weight: ${({ theme }) => theme.fontWeights.table.filterButton};
  line-height: ${({ theme }) => theme.lineHeights.table.filterButton};
  display: inline-flex;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.table.filterButtonBackground};
  cursor: pointer;
  position: relative;
  max-width: 240px;
  margin-right: ${({ theme }) => theme.space.table.filterButtonMarginRight};
  margin-bottom: ${({ theme }) => theme.space.table.filterButtonMarginBottom};
  border-radius: ${({ theme }) => theme.radii.table.filterButton};
  border-color: ${({ theme }) => theme.colors.table.filterButtonBorder};

  &:hover {
    z-index: 1;
    border-color: ${({ theme }) => theme.colors.table.filterButtonHoverBorder};
  }

  ${({ theme, themeActive }) =>
    themeActive
      ? css`
          z-index: 1;
          background-color: ${theme.colors.table.filterButtonActiveBackground};
        `
      : css`
          background-color: ${theme.colors.table.filterButtonBackground};
        `};

  > ${StyledIcon} {
    padding-left: ${({ theme }) => theme.space.table.filterButtonIconPadding};
  }
`;

const StyledDropdownContent = styled.div`
  margin: 0;
  padding: ${({ theme }) => theme.space.table.filterDropdownPadding};
  overflow: hidden;
`;

const StyledLabeledFilter = styled.div`
  margin: 0;
  padding: 0;
  font-size: ${({ theme }) => theme.fontSizes.table.filterButton};
  font-weight: ${({ theme }) => theme.fontWeights.table.filterLabel};
  color: ${({ theme }) => theme.colors.table.filterLabelText};
`;

const FilterByWrapper = styled.span`
  margin: 0;
  padding: ${({ theme }) => theme.space.table.filterButtonPadding};
  padding-left: 0;
  font-size: ${({ theme }) => theme.fontSizes.table.filterButton};
  font-weight: ${({ theme }) => theme.fontWeights.table.filterBy};
  line-height: 100%;
  white-space: nowrap;
`;

const FiltersWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

const StyledLabel = styled.span`
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;

const StyledGroupedFilterContent = styled.div`
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 300px;

  > ${StyledLabeledFilter}:not(:last-child) {
    padding-bottom: ${({ theme }) => theme.space.table.filterDropdownPadding};
  }
`;

const StyledLabeledFilterContent = styled.div`
  margin: 0;
  padding: 0;
  padding-top: ${({ theme }) => theme.space.table.filterLabelContentPadding};
`;

const StyledFilterList = styled.div`
  margin: 0;
  padding: 0;
`;

const StyledFiltersHeader = styled.div`
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: ${({ theme }) => theme.space.small}px;

  @media (min-width: ${getBreakpointValue('lg')}px) {
    display: none;
  }
`;

const StyledFilterListWithAddons = styled.div`
  margin: 0;
  padding: 0;
  display: flex;

  @media (max-width: ${getBreakpointValue('lg') - 1}px) {
    > :not(${StyledFilterList}) {
      display: none;
    }
  }
`;

const StyledTagList = styled.div`
  margin: 0;
  padding: 0;
`;

export {
  StyledDropdownContent,
  StyledDropdownButton,
  StyledGroupedFilterContent,
  StyledLabeledFilter,
  StyledLabel,
  StyledLabeledFilterContent,
  StyledFilterList,
  StyledFiltersHeader,
  StyledFilterListWithAddons,
  StyledTagList,
  FilterByWrapper,
  FiltersWrapper,
};