import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
import { IconButton } from '../../IconButton';
import { styled } from '../../styled';
import { Typography } from '../../Typography';
import { Cell } from '../Cell';
import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../constants';
import { dataGridGroupedColumnLabelClassnames, dataGridRowClassnames, dataGridRowContentClassnames, } from './constants';
export const Wrapper = styled.li `
  --level: 0;
  position: relative;

  &:not(:last-of-type)::before,
  &.${dataGridRowClassnames.hidden}::before {
    content: '';

    position: absolute;
    z-index: 1;
    top: 0;
    transform: translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${TREE_LINE_WIDTH}px));

    display: none;

    width: 0;
    height: 100%;

    border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
  }

  ${({ theme }) => theme.breakpoints.up('sm')} {
    &.${dataGridRowClassnames.showConnector}::before,
    & .${dataGridRowContentClassnames.root}::before {
      display: block;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding-bottom: ${({ theme }) => theme.spacing(3)};

    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};

    &:not(:first-of-type) {
      padding-top: ${({ theme }) => theme.spacing(5)};
    }

    &:first-of-type {
      padding-top: ${({ theme }) => theme.spacing(1)};
    }
  }
`;
export const ContentWrapper = styled.div `
  position: relative;

  display: grid;
  grid-template-columns: ${({ $gridColumns }) => $gridColumns};

  background-color: transparent;

  &::before {
    content: '';

    position: absolute;
    top: 0;
    transform: translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${TREE_LINE_WIDTH}px));

    width: ${TREE_LINE_WIDTH}px;
    height: 50%;

    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};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      display: none;
    }
  }

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    &.${dataGridRowContentClassnames.hovered} {
      cursor: pointer;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      cursor: initial;

      background-color: transparent;
    }
  }


  &.${dataGridRowClassnames.hover} {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    &.${dataGridRowContentClassnames.hovered} {
      cursor: pointer;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      cursor: initial;

      background-color: transparent;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-template-columns: 1fr;
  }
`;
export const CellStyled = styled(Cell) `
  &:first-of-type {
    margin-left: calc(var(--level) * ${ROOT_ACTION_CELL_WIDTH}px);
  }
`;
export const CheckboxCell = styled.div `
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;

  width: ${ROOT_ACTION_CELL_WIDTH}px;
`;
export const CollapseCell = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  width: ${ROOT_ACTION_CELL_WIDTH}px;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const CollapseButton = styled(IconButton) `
  width: 24px;
  height: 24px;

  color: inherit;

  &:hover {
    background-color: ${({ theme }) => theme.palette.grey[300]};
  }
`;
export const ChevronIcon = styled(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,
})};
`;
export const BottomDrawerContent = styled.div `
    ${({ theme }) => theme.breakpoints.down('sm')} {
      padding: ${({ theme }) => theme.spacing(5, 4)};
    }
`;
export const GroupedColumnLabel = styled(Typography) `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: block;

    margin-top: ${({ theme }) => theme.spacing(3)};

    &.${dataGridGroupedColumnLabelClassnames.hidden} {
      display: none;
    }
  }
`;
