import { dataGridClassnames } from '../../DataGrid';
import { css, styled } from '../../styled';
const createThumbStyles = (theme) => css `
  pointer-events: all;

  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  cursor: col-resize;

  transform-origin: top;

  width: var(--thumb-width);
  height: var(--thumb-height);

  color: ${theme.palette.grey[200]};

  appearance: none;
  background: linear-gradient(
    to right,
    transparent 25%,
    currentColor 25%,
    currentColor 75%,
    transparent 75%
  );
  border: none;

  transition: ${theme.transitions.create(['color'], {
    duration: theme.transitions.duration.short,
})};

  /* Причина игнора: прогрессивное улучшение */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  @supports (container-type: size) {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100cqh;
    max-height: var(--thumb-height);
  }
`;
const createThumbActiveStyles = (theme) => css `
  transform: scaleY(5) scaleX(0.4);

  color: ${theme.palette.primary.dark};

  /* Причина игнора: прогрессивное улучшение */
  /* stylelint-disable plugin/no-unsupported-browser-features */
  @supports (container-type: size) {
    transform: translateY(calc(100cqh / 2 - var(--thumb-height) / 2))
      scaleX(0.4);

    max-height: calc(100cqh - var(--thumb-height) / 2);
  }
  /* stylelint-enable plugin/no-unsupported-browser-features */
`;
const createThumbHoverStyles = (theme) => css `
  color: ${theme.palette.grey[500]};
`;
export const Wrapper = styled.div `
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;

  container-type: size;

  width: ${({ actionsColumnWidth }) => actionsColumnWidth ? `calc(100% - ${actionsColumnWidth})` : '100%'};
  height: 100%;

  &:hover input {
    opacity: 1;
  }
`;
export const InputSlider = styled.input `
  --thumb-height: 25px;
  --thumb-width: 10px;
  --track-width: calc(100% + var(--thumb-width));
  pointer-events: none;

  position: absolute;
  z-index: ${({ theme }) => theme.zIndex.fab};
  top: 19px;

  /*
  * В нативном поведении <input type="range"/> при крайних положениях ползунка,
  * границы ползунка совпадают с границей трека, 
  * и если мы оставим как есть, то тогда получим поведение,
  * когда центр ползунка чуть чуть не совпадает с границей разделяющей колонки.
  * Только если граница будет ровно в середине, тогда они совпадут, но если граница немного левее центра,
  * то ползунок окажется чуть правее границы, и, соответственно, если граница правее центра, то ползунок окажется чуть левее границы колонок.
  * Для решения этой проблемы, мы немного дополнительно растягиваем весь трек на ширину ползунка,
  * и смещаем его левее на половину ширины этого ползунка  
  */
  left: calc(var(--thumb-width) / -2);

  width: var(--track-width);
  min-width: var(--track-width);
  max-width: var(--track-width);
  height: 0;
  margin: 0;

  appearance: none;
  opacity: 0;
  border: none;
  outline: none;

  transition: ${({ theme }) => theme.transitions.create(['opacity'], {
    duration: theme.transitions.duration.standard,
})};

  /*
  * объединять стили для -moz-range-thumb и для -webkit-slider-thumb через запятую нельзя,
  * иначе для браузера это станет единым блоком,
  * и для каждого браузера этот блок будет содержать один невалидный селектор,
  * для chrome невалидный селектор -moz-range-thumb а для firefox -webkit-slider-thumb,
  * и из-за этого, стили всего блока будут проигнорированы
  */
  &::-moz-range-thumb {
    ${({ theme }) => createThumbStyles(theme)}
    &:hover {
      ${({ theme }) => createThumbHoverStyles(theme)}
    }
  }

  &::-webkit-slider-thumb {
    ${({ theme }) => createThumbStyles(theme)}
    &:hover {
      ${({ theme }) => createThumbHoverStyles(theme)}
    }
  }

  &:active::-moz-range-thumb,
  &:focus-visible::-moz-range-thumb,
  &::-moz-range-thumb:active {
    ${({ theme }) => createThumbActiveStyles(theme)}
  }

  &:active::-webkit-slider-thumb,
  &:focus-visible::-webkit-slider-thumb,
  &::-webkit-slider-thumb:active {
    ${({ theme }) => createThumbActiveStyles(theme)}
  }

  /* Причина игнора: Не критично для отображения */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  .${dataGridClassnames.root}:has(.${dataGridClassnames.header}:hover) &,
  &:focus-visible,
  &:hover,
  &:active {
    opacity: 1;
  }
`;
