import { CustomSxProps } from 'types';

const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);

export const taskWrapperStyles = (isNew: boolean): CustomSxProps => ({
    fontFamily: (theme) => theme.typography.fontFamily,
    border: (theme) => `1px solid ${isNew ? theme.palette.primary.main : theme.palette.secondary.main}`,
    borderRadius: '5px',
    padding: '16px 24px',
    height: 110,
});

export const taskNameStyles: CustomSxProps = {
    fontStyle: 'italic',
    fontWeight: 600,
    color: (theme) => theme.palette.grey[600],
};

export const taskDateStyles: CustomSxProps = {
    fontStyle: 'italic',
    fontSize: 14,
    marginRight: '4px',
    paddingTop: '4px',
};

const GAP = 70;
const BUTTON_WIDTH = 9;

export const taskDescriptionStyles = (taskWidth: number): CustomSxProps => ({
    flexGrow: 1,
    maxWidth: taskWidth - BUTTON_WIDTH * rem - GAP,
    border: (theme) => `1px solid ${theme.palette.secondary.main}`,
    color: (theme) => `${theme.palette.grey[600]}`,
    borderRadius: '10px',
    padding: '12px',
    wordBreak: 'break-word',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
});

export const buttonStyles: CustomSxProps = {
    display: 'flex',
    alignItems: 'center',
    border: (theme) => `1px solid ${theme.palette.success.main}`,
    borderRadius: '10px',
    textAlign: 'center',
    flexBasis: `${BUTTON_WIDTH}rem`,
    height: 43,
    paddingRight: 2,
};

export const buttonTextStyles: CustomSxProps = {
    fontStyle: 'italic',
    fontSize: 14,
    color: (theme) => theme.palette.success.main,
};

export const seeMoreStyles: CustomSxProps = {
    display: 'flex',
    flexBasis: `${BUTTON_WIDTH}rem`,
    fontStyle: 'italic',
    color: (theme) => theme.palette.grey[600],
    cursor: 'pointer',
};