import { styled } from '../styled';
import { dataGridCellClassnames } from './Cell/constants';
import { dataGridClassnames } from './constants';
import { headCellClassnames } from './HeadCell';
import { dataGridRowClassnames } from './Row/constants';
export const Container = styled.div `
  --max-height: initial;

  position: relative;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
  max-height: var(--max-height);

  &.${dataGridClassnames.isAllowHorizontalScroll} {
    overflow: auto hidden;

    & .${dataGridClassnames.wrapper} {
      overflow: auto hidden;
    }
  }

  &.${dataGridClassnames.hasPinnedSections} {
    overflow: hidden;
  }

  &.${dataGridClassnames.hasGroupedColumns} {
    & .${dataGridClassnames.header} {
      grid-template-rows: repeat(2, auto);

      & .${headCellClassnames.groupParent} {
        grid-column: var(--grid-column-start) / var(--grid-column-end);
        grid-row: 1;
        justify-content: center;
      }

      & .${headCellClassnames.groupChild} {
        grid-row: 2;
        justify-content: center;
      }

      & .${headCellClassnames.singleColumn} {
        grid-row: 1 / -1;

        height: 80px;
      }
    }
  }

  @supports not (container-type: scroll-state) {
    &.${dataGridClassnames.overflowed} {
      & .${dataGridClassnames.rightPinnedSection} {
         box-shadow: -3px 0 4px 0 #63636326;
      }

      & .${dataGridClassnames.leftPinnedSection} {
         box-shadow: 3px 0 4px 0 #63636326;
      }
    }
  }

  &.${dataGridClassnames.gridViewFull} {
    & .${dataGridClassnames.header} {
      background-color: ${({ theme }) => theme.palette.grey[100]};
      border-top-left-radius: ${({ theme }) => theme.shape.medium};
      border-top-right-radius: ${({ theme }) => theme.shape.medium};
    }

    & .${dataGridCellClassnames.root},
    & .${headCellClassnames.root} {
      border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
      border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};

      &:first-of-type,
      &:first-of-type + .${headCellClassnames.groupChild} {
        border-left: none;
      }
    }

    & .${headCellClassnames.singleColumn},
    & .${headCellClassnames.groupParent} {
      border-top: none;
    }

    & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
    }

    &:not(.${dataGridClassnames.hasPinnedSections}) .${dataGridClassnames.body},
    & .${dataGridClassnames.pinnedSections} {
      container-name: data-grid-scroll-container;
      container-type: scroll-state;
    }

    /* Прогрессивное улучшение. Убираем нижнюю границу последней строки когда scrollbar находится в нижней точке. Для того что бы избежать двойного разделителя снизу */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    @container data-grid-scroll-container scroll-state((scrollable: y) and (not (scrollable: bottom))) {
      & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
        border-bottom: none;
      }
    }

    & .${dataGridRowClassnames.root}:first-of-type .${dataGridCellClassnames.root} {
      border-top: none;
    }
  }

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

    & .${dataGridClassnames.loadingPlaceholder} {
      justify-content: flex-start;
    }

    &.${dataGridClassnames.hasPinnedSections} {
      overflow: initial;
    }

    &.${dataGridClassnames.isAllowHorizontalScroll} {
      overflow: initial;

      & .${dataGridClassnames.wrapper} {
        overflow: initial;
      }
    }

    &.${dataGridClassnames.gridViewFull} {
      & .${dataGridCellClassnames.root}, & .${headCellClassnames.root} {
        border: none;
      }

      & .${dataGridRowClassnames.root}:last-of-type .${dataGridCellClassnames.root} {
        border-bottom: none;
      }
    }
  }
`;
export const DataGridWrapper = styled.div `
  position: relative;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  height: 100%;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: initial;
  }
`;
export const DisabledDataGridWrapper = styled(DataGridWrapper) `
  pointer-events: none;

  background: ${({ theme }) => theme.palette.background.element};
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  mix-blend-mode: luminosity;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    opacity: 0.7;
  }
`;
