import styled from "styled-components";

import Tooltip from "../../Tooltip";

import { getHeadColor } from "../utils";

const HeadTag = styled.div`
  display: flex;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
  align-items: center;
  div {
    transform: rotate(-90deg);
  }
`;

const HeadText = styled.div`
  display: flex;
  align-items: center;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
  width: 100%;
`;

const HeadItem = styled.div<{ level: number; tag: string; isSelected: boolean; isHidden: boolean }>`
  position: relative;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  background-color: ${(p) => p.theme.colors.uiBackground02};
  display: flex;
  margin-left: ${(p) => `${(p.level - 1) * 16}px`};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  min-height: 40px;
  border: ${(p) => `1px solid ${getHeadColor(p.tag)}`};
  border-radius: ${(p) => p.theme.radii.s};
  cursor: pointer;
  box-shadow: ${(p) => p.theme.shadow.shadowS};
  outline: ${(p) => (p.isSelected ? `1px solid ${p.theme.colors.interactive01}` : "none")};

  &:before {
    content: "";
    border-radius: ${(p) => p.theme.radii.s};
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
  }

  &:hover:before {
    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
    opacity: 1;
  }

  ${HeadTag} {
    background-color: ${(p) => getHeadColor(p.tag)};
  }

  ${HeadText} {
    color: ${(p) => (p.isHidden ? p.theme.colors.interactiveDisabled : p.theme.colors.textHighEmphasis)};
  }
`;

const HiddenIcon = styled.div`
  margin-left: auto;
  svg path {
    fill: ${(p) => p.theme.colors.interactiveDisabled};
  }
`;

const StyledTooltip = styled(Tooltip)`
  width: 100%;
`;

export { HeadItem, HeadTag, HeadText, HiddenIcon, StyledTooltip };
