"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ItemWrapper = exports.Note = exports.Label = exports.LabelWrapper = exports.ChevronIcon = exports.CollapseButton = exports.ItemContent = exports.Item = void 0;
const Typography_1 = require("@mui/material/Typography");
const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
const Button_1 = require("../../Button");
const Description_1 = require("../../Description");
const IconButton_1 = require("../../IconButton");
const OverflowTypography_1 = require("../../OverflowTypography");
const SvgIcon_1 = require("../../SvgIcon");
const styled_1 = require("../../styled");
const Typography_2 = require("../../Typography");
const constants_1 = require("./constants");
const getBackgroundColor = (theme, isSelected, isDisabled) => {
    if (isDisabled) {
        return 'transparent';
    }
    return isSelected
        ? theme.palette.primary[100]
        : theme.palette.background.elementHover;
};
exports.Item = (0, styled_1.styled)('li', {
    shouldForwardProp: (prop) => !['as', '$level'].includes(prop),
}) `
  position: relative;

  &:not(:last-of-type)::before {
    content: '';

    position: absolute;
    z-index: 1;
    top: 0;
    transform: ${({ $level }) => `translateX(calc(((${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * ${$level}) - ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH}))`};

    width: 0;
    height: 100%;

    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
  }
`;
exports.ItemContent = (0, styled_1.styled)('div', {
    shouldForwardProp: (prop) => !['$isSelected', '$isDisabled', '$level'].includes(prop),
}) `
  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};

  position: relative;

  display: flex;

  min-height: 32px;
  padding: ${({ theme }) => theme.spacing(0, 4, 1, 0)};
  padding-left: ${({ theme, $level }) => `calc(${theme.spacing($level * 7)} + ${theme.spacing(7)})`};

  color: ${({ theme, $isDisabled }) => $isDisabled ? theme.palette.text.disabled : theme.palette.text.primary};

  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.palette.primary[100] : 'transparent'};

  transition: ${({ theme }) => theme.transitions.create('background-color', {
    easing: theme.transitions.easing.easeIn,
    duration: theme.transitions.duration.shortest,
})};

  &:hover {
    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
  }

  &:focus {
    background-color: ${({ theme, $isSelected, $isDisabled }) => getBackgroundColor(theme, $isSelected, $isDisabled)};
    border: 0;
    outline: 0;
  }
`;
exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton, {
    shouldForwardProp: (prop) => !['$isNotBlockingExpandList'].includes(prop),
}) `
  position: relative;
  z-index: 1;

  width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
  height: 24px;
  margin-left: -${constants_1.COLLAPSE_BUTTON_WIDTH};

  color: ${({ theme, $isNotBlockingExpandList }) => $isNotBlockingExpandList ? theme.palette.text.primary : 'inherit'};

  &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root}, &.${Button_1.buttonClasses.root} {
    width: 24px;
    height: 24px;

    ${({ theme }) => theme.breakpoints.down('sm')} {
      width: 24px;
      height: 24px;
    }
  }

  &:hover {
    background-color: ${({ theme }) => theme.palette.grey[300]};
  }
`;
exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd, {
    shouldForwardProp: (prop) => prop !== '$isActive',
}) `
  transform: rotateZ(${({ $isActive }) => ($isActive ? 90 : 0)}deg);

  transition: ${({ theme }) => theme.transitions.create('transform', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.short,
})};
`;
exports.LabelWrapper = (0, styled_1.styled)('div', {
    shouldForwardProp: (prop) => prop !== '$level',
}) `
  position: relative;

  display: flex;
  flex-grow: 1;
  align-items: center;

  padding-top: ${({ theme }) => theme.spacing(1)};

  &::before {
    content: '';

    position: absolute;
    z-index: 1;
    top: 0;
    left: calc(
      ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH} -
        (${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * 2
    );

    width: ${constants_1.TREE_LINE_WIDTH};

    /* Добавляем к высоте половину нижнего отступа, который не входит в высоту текущего элемента */
    height: ${({ theme }) => `calc(50% + ${theme.spacing(1)}/2)`};

    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
    border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
  }
`;
exports.Label = (0, styled_1.styled)(Typography_2.Typography) `
  display: flex;
  align-items: center;

  margin-left: ${({ theme }) => theme.spacing(1)};
`;
exports.Note = (0, styled_1.styled)(OverflowTypography_1.OverflowTypography) `
  margin-left: ${({ theme }) => theme.spacing(1)};

  .${Description_1.descriptionClassnames.root} {
    .${Typography_1.typographyClasses.root} {
      font-size: inherit;
      color: inherit;
    }
  }
`;
exports.ItemWrapper = styled_1.styled.div `
  display: flex;
  flex-direction: column;
`;
