import styled from "styled-components";

import { getHeadColor } from "./utils";

const Wrapper = styled.div``;

const HeadingsWrapper = styled.div`
  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
  overflow-y: auto;
  height: 100%;
  width: 100%;
  position: relative;

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 100%;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.colors.iconNonActive};
  }
`;

const FiltersWrapper = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.colors.uiBackground03};
  border-radius: ${(p) => p.theme.radii.s};
  padding: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  gap: ${(p) => p.theme.spacing.xs};
  overflow-x: auto;
  width: 100%;

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p) => p.theme.color.iconNonActive};
  }
`;

const ToggleWrapper = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.colors.uiBackground03};
  border-radius: ${(p) => p.theme.radii.s};
  padding: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  gap: ${(p) => p.theme.spacing.xs};
  width: 100%;
  justify-content: space-between;
  align-items: center;
`;

const ToggleText = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
`;

const FilterText = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  flex-shrink: 0;
`;

const FilterItem = styled.button<{ isSelected: boolean; tag: string }>`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => (p.isSelected ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
  text-transform: uppercase;
  border-radius: ${(p) => p.theme.radii.xs};
  background-color: ${(p) => getHeadColor(p.tag, !p.isSelected ? 0.5 : undefined)};
  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
  outline: ${(p) => (p.isSelected ? `1px solid ${p.theme.colors.interactive01}` : "none")};
  font-weight: ${(p) => (p.isSelected ? "700" : "500")};
  flex-shrink: 0;
`;

const HeadingsListWrapper = styled.div``;

const EmptyWrapper = styled.div`
  height: 100%;
  display: flex;
  align-items: center;
`;

export {
	Wrapper,
	HeadingsWrapper,
	FiltersWrapper,
	FilterText,
	FilterItem,
	HeadingsListWrapper,
	EmptyWrapper,
	ToggleWrapper,
	ToggleText,
};
