import React from 'react';
import Hook from '../../hook';
import { IconButton, Typography } from '@mui/material';

interface DayProps {
    filled?: boolean;
    outlined?: boolean;
    highlighted?: boolean;
    disabled?: boolean;
    startOfRange?: boolean;
    endOfRange?: boolean;
    onClick?: () => void;
    onHover?: () => void;
    value: number | string;
}

export const Day: React.FunctionComponent<DayProps> = ({
    value, startOfRange, endOfRange, disabled, highlighted, outlined, filled,
    onClick, onHover,
}: DayProps) => {
    const [theme] = Hook.useTheme();

    return (
        <div
            style={{
                display: 'flex',
                opacity: disabled ? .4 : 1,
                borderRadius: startOfRange
                    ? '50% 0 0 50%'
                    : endOfRange
                        ? '0 50% 50% 0'
                        : undefined,
                backgroundColor: !disabled && highlighted
                    ? theme.palette.action.hover
                    : undefined
            }}
        >
            <IconButton
                style={{
                    height: 36,
                    width: 36,
                    padding: 0,
                    border: !disabled && outlined
                        ? `1px solid ${theme.palette.primary.dark}`
                        : undefined,
                    backgroundColor: !disabled && filled
                        ? theme.palette.primary.dark
                        : undefined
                }}
                disabled={disabled}
                onClick={onClick}
                onMouseOver={onHover}
            >
                <Typography
                    style={{
                        lineHeight: 1.6,
                        color: !disabled && filled
                            ? theme.palette.primary.contrastText
                            : undefined
                    }}
                    color={!disabled ? 'textPrimary' : 'textSecondary'}
                    variant="body2"
                >
                    {value}
                </Typography>
            </IconButton>
        </div>
    );
}