'use client';

import { Theme } from '@mui/material';
import createTheme from '@mui/material/styles/createTheme';
import { Inter } from 'next/font/google';

export const inter = Inter({
    weight: ['300', '400', '500', '700'],
    subsets: ['latin', 'cyrillic'],
    display: 'swap',
    fallback: ['Arial', 'sans-serif'],
});

const theme_colors = {
    primary: '#222',
    secondary: '#666',

    white: '#fff',

    backgroundWhite: '#fff',
    backgroundPage: '#fff',

    fontFamily: 'sans-serif',
};

export const typographyFont = {
    fontFamily: `"Inter", ${inter.style.fontFamily}, "Arial", sans-serif`,
    src: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap',
};

const defaultTheme = createTheme();

const getTheme = (): Theme => {
    return {
        ...defaultTheme,
        components: {
            MuiCssBaseline: {
                styleOverrides(theme) {
                    return {
                        ...(typographyFont.src && {
                            '@font-face': {
                                fontFamily: typographyFont.fontFamily,
                                src: `url(${typographyFont.src})`,
                            },
                        }),
                        html: {
                            boxSizing: 'border-box',
                            scrollBehavior: 'smooth',
                            fontSize: '16px',
                        },
                        body: {
                            minHeight: '100vh',
                            backgroundColor: theme_colors.backgroundPage,
                            fontFamily: typographyFont.fontFamily,
                        },
                        '*, *::after, *::before': {
                            boxSizing: 'inherit',
                        },
                        // '*:focus-visible': {
                        //     outline: '2px dashed #479aff',
                        //     outlineOffset: '3px',
                        // },
                        '.visually-hidden': {
                            position: 'absolute',
                            width: '1px',
                            height: '1px',
                            margin: '-1px',
                            border: 0,
                            padding: 0,
                            clip: 'rect(0 0 0 0)',
                            overflow: 'hidden',
                        },
                        '.no-select': {
                            webkitTouchCallout: 'none',
                            webkitUserSelect: 'none',
                            khtmlUserSelect: 'none',
                            mozUserSelect: 'none',
                            msUserSelect: 'none',
                            userSelect: 'none',
                        },
                        '.ellipsis': {
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: 1,
                            WebkitBoxOrient: 'vertical',
                        },
                        '.ellipsis2': {
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: 2,
                            WebkitBoxOrient: 'vertical',
                        },
                        '.uppercase': {
                            textTransform: 'uppercase',
                        },
                        '.pointer': {
                            cursor: 'pointer',
                        },
                        // NOTE: SCROLL
                        '::-webkit-scrollbar': {
                            width: '5px',
                        },
                        /* Track */
                        '::-webkit-scrollbar-track': {
                            background: '#EDF1F7',
                        },
                        /* Handle */
                        '::-webkit-scrollbar-thumb': {
                            background: '#3489E4',
                            borderRadius: '4px',
                        },
                        /* Handle on hover */
                        '::-webkit-scrollbar-thumb:hover': {
                            background: '#3b3b3b',
                        },

                        '@keyframes spin': {
                            '0%': {
                                transform: 'rotate(0deg)',
                            },
                            '100%': {
                                transform: 'rotate(360deg)',
                            },
                        },
                    };
                },
            },
            MuiTypography: {
                styleOverrides: {},
            },
            MuiButton: {
                defaultProps: {
                    variant: 'contained',
                    disableRipple: true,
                    disableElevation: true,
                },
            },
            MuiIconButton: {
                defaultProps: {
                    disableRipple: true,
                },
            },
        },
    };
};

export default getTheme;
