Rating

import { Button, Box } from '@mui/material';

import {
    OptionWithNoteProperty,
    ResultValue,
} from '../../../../typescript/types/surveyDefinition';

type Props = {
    pageOptions?: OptionWithNoteProperty[];
    value?: ResultValue;
    handleChange: (value: ResultValue[]) => void;
};

const Rating = ({ pageOptions, value, handleChange }: Props) => {
    if (!pageOptions) {
        return null;
    }

    const handleClick = (resultValue: ResultValue) => {
        handleChange([resultValue]);
    };

    return (
        <Box sx={style.container}>
            {pageOptions?.map((option, idx) => {
                return (
                    <Box key={idx}>
                        <Box sx={style.optionNote}>{option.note}</Box>
                        <Button
                            // focusRipple={false}
                            // @ts-ignore
                            focusVisibleClassName="{{border: '1px solid red !important'}}"
                            onClick={() => handleClick(option.value)}
                            component="span"
                            size="medium"
                            variant="outlined"
                            sx={
                                value === option.value
                                    ? style.buttonSelected
                                    : style.buttonDefault
                            }
                        >
                            {option.value}
                        </Button>
                    </Box>
                );
            })}
        </Box>
    );
};

const style = {
    container: {
        backgroundImage:
            'linear-gradient(to right, #B0D6F5 0%, #ffffff 50%, #DA483E 100%)',
        display: 'flex',
        flexFlow: 'row nowrap',
        justifyContent: 'space-between',
        padding: 2,
        alignItems: 'end',
    },
    optionNote: {
        paddingBottom: '10px',
    },
    buttonDefault: {
        borderRadius: '50%',
        borderColor: 'grey.300',
        backgroundColor: 'white',
        minWidth: 20,
        width: 35,
        height: 35,
        color: 'grey.900',
        '&:hover': {
            backgroundColor: 'grey.200',
            color: 'grey.900',
            borderColor: 'grey.900',
        },
    },
    buttonSelected: {
        borderRadius: '50%',
        borderColor: 'grey.900',
        backgroundColor: 'grey.900',
        minWidth: 20,
        width: 35,
        height: 35,
        color: 'white',
        '&:hover': {
            backgroundColor: 'grey.900',
            color: 'white',
            borderColor: 'grey.900',
        },
    },
    testClass2: {
        border: '1px solid red !important',
    },
};

export default Rating;