import { type Theme } from '@material-hu/mui/styles';
export const stickyLeftCellStyle = {
  position: 'sticky',
  left: 0,
  zIndex: 1,
  '&::after': {
    content: '""',
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    borderRight: (theme: Theme) =>
      `4px solid ${theme.palette.new.border.neutral.default}`,
  },
};

export const stickyRightCellStyle = {
  position: 'sticky',
  right: 0,
  zIndex: 1,
  '&::before': {
    content: '""',
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    borderLeft: (theme: Theme) =>
      `4px solid ${theme.palette.new.border.neutral.default}`,
  },
};

export const createStickyHeaderStyle = (baseStyle: object) => ({
  ...baseStyle,
  backgroundColor: (theme: Theme) =>
    theme.palette.new.background.elements.default,
  backgroundImage: (theme: Theme) =>
    `linear-gradient(${theme.palette.new.action.background.neutral.hover}, ${theme.palette.new.action.background.neutral.hover})`,
});

export const ellipsisCellStyle = {
  maxWidth: 200,
  '& .MuiTypography-root': {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
};

export const ellipsisTypographyStyle = {
  lineHeight: 1.2,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: '-webkit-box',
  WebkitLineClamp: 2,
  WebkitBoxOrient: 'vertical',
  maxWidth: 250,
};

export const formFieldsRequestCreate = {
  policyTypeId: 'policyTypeId',
  fromDate: 'fromDate',
  consumptionTypeFromDate: 'consumptionTypeFromDate',
  toDate: 'toDate',
  consumptionTypeToDate: 'consumptionTypeToDate',
  description: 'description',
  files: 'files',
  fromHour: 'fromHour',
  fromHourTime: 'fromHourTime',
  toHour: 'toHour',
  toHourTime: 'toHourTime',
  hoursRequestType: 'hoursRequestType',
  hasSellingBalance: 'hasSellingBalance',
  amountInMoney: 'amountInMoney',
  amountInTime: 'amountInTime',
  hasSubstituteApprover: 'hasSubstituteApprover',
  substituteApprover: 'substituteApprover',
} as const;
