import { Loader } from '../../components/Loader';
import { Popover } from '../../components/Popover';
import { styled } from '../../components/styled';
import { Typography } from '../../components/Typography';
import { EditOutlineMd } from '../../icons/EditOutlineMd';
import { editableTextClassnames } from './constants';
const getBackgroundColor = (theme, $isEdited, $isLoading) => {
    if ($isEdited) {
        return theme.palette.primary[100];
    }
    if ($isLoading) {
        return theme.palette.grey[100];
    }
    return 'transparent';
};
export const DisplayValue = styled(Typography, {
    shouldForwardProp: (prop) => !['$isEdited', '$isLoading'].includes(prop),
}) `
  cursor: pointer;

  display: unset;

  background: ${({ theme, $isEdited, $isLoading }) => getBackgroundColor(theme, $isEdited, $isLoading)};
  border-radius: ${({ theme }) => theme.shape.small};
  box-shadow: ${({ theme, $isEdited, $isLoading }) => `0 0 0 2px ${getBackgroundColor(theme, $isEdited, $isLoading)}`};

  transition: ${({ theme }) => {
    return theme.transitions.create(['background', 'box-shadow'], {
        duration: theme.transitions.duration.short,
    });
}};

  &:hover {
    cursor: ${({ $isLoading }) => ($isLoading ? 'default' : 'pointer')};

    text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};

    .${editableTextClassnames.showIconOnHover} {
      display: unset;
    }
  }
`;
export const StyledEditIcon = styled(EditOutlineMd, {
    shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),
}) `
  width: auto;
  min-width: 16px;
  height: 1em;
  min-height: 16px;
  margin-right: ${({ $iconPosition, theme }) => $iconPosition === 'left' ? theme.spacing(1) : ''};

  /* Вертикальный отступ для визуального центрирования. Значение подобрано эмпирическим путем */
  margin-bottom: calc(-1em / 5);
  margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};

  font-size: inherit;

  &.${editableTextClassnames.showIconOnHover} {
    display: none;
  }
`;
export const StyledLoader = styled(Loader, {
    shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),
}) `
  width: 1em;
  height: 1em;
  margin-right: ${({ $iconPosition, theme }) => $iconPosition === 'left' ? theme.spacing(1) : ''};

  /* Задаем вертикальный отступ для визуального центрирования */

  /* Значение подобрано эмпирическим путем */
  margin-bottom: calc(-1em / 5);
  margin-left: ${({ $iconPosition, theme }) => $iconPosition === 'right' ? theme.spacing(1) : ''};

  font-size: inherit;
`;
export const StyledPopover = styled(Popover) `
  margin-top: ${({ theme }) => theme.spacing(2)};
`;
