import getNprogressJss from '../jss/npgrogress'
import { Theme } from '@mui/material/styles'
import { CSSObject } from 'tss-react'

export const createGlobalStyles = (theme: Theme): CSSObject => {
  const genSpacing = (breakpoint = ''): CSSObject => {
    const spacing = {}
    const directions = [
      { key: 't', val: 'Top' },
      { key: 'l', val: 'Left' },
      { key: 'r', val: 'Right' },
      {
        key: 'b',
        val: 'Bottom'
      }
    ]
    for (let i = 0; i <= 5; i++) {
      for (let i1 = 0; i1 < directions.length; i1++) {
        const dir = directions[i1]
        spacing[`.p${dir.key}${breakpoint}-${i}`] = {
          [`padding${dir.val}`]: `${theme.spacing(i)} !important`
        }
        spacing[`.m${dir.key}${breakpoint}-${i}`] = {
          [`margin${dir.val}`]: `${theme.spacing(i)} !important`
        }
        spacing[`.p${breakpoint}-${i}`] = {
          [`padding`]: `${theme.spacing(i)} !important`
        }
        spacing[`.m${breakpoint}-${i}`] = {
          [`margin`]: `${theme.spacing(i)} !important`
        }
        spacing[`.mx${breakpoint}-${i}`] = {
          [`marginLeft`]: `${theme.spacing(i)} !important`,
          [`marginRight`]: `${theme.spacing(i)} !important`
        }
        spacing[`.my${breakpoint}-${i}`] = {
          [`marginTop`]: `${theme.spacing(i)} !important`,
          [`marginBottom`]: `${theme.spacing(i)} !important`
        }
        spacing[`.px${breakpoint}-${i}`] = {
          [`paddingLeft`]: `${theme.spacing(i)} !important`,
          [`paddingRight`]: `${theme.spacing(i)} !important`
        }
        spacing[`.py${breakpoint}-${i}`] = {
          [`paddingTop`]: `${theme.spacing(i)} !important`,
          [`paddingBottom`]: `${theme.spacing(i)} !important`
        }
      }
    }
    return spacing
  }

  const dark = '#303030'
  return {
    ...getNprogressJss(theme),
    ...genSpacing(),
    '.img-fluid': {
      maxWidth: '100%',
      height: 'auto'
    },
    a: {
      textDecoration: 'none'
    },
    '.lm-grid-row__wrap': {
      flexGrow: 1
    },
    '.lm-grid-column__wrap': {
      padding: theme.spacing(2),
      position: 'relative',
      // width: '100%',
      height: '100%'
    },
    '.badge': {
      display: 'inline-block',
      padding: '.25em .4em',
      backgroundColor: theme.palette.mode === 'dark' ? '#f5f5f5' : dark,
      color:
        theme.palette.mode === 'dark'
          ? 'rgba(0, 0, 0, 0.87)'
          : theme.palette.common.white,
      borderRadius: theme.shape.borderRadius,
      transform: '225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
    },
    '.badge-pill': {
      display: 'inline-block',
      padding: '.25em .4em',
      backgroundColor: theme.palette.mode === 'dark' ? '#f5f5f5' : dark,
      color:
        theme.palette.mode === 'dark'
          ? 'rgba(0, 0, 0, 0.87)'
          : theme.palette.common.white,
      transform: '225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
      borderRadius: '2rem'
    },
    '.badge-square': {
      display: 'inline-block',
      padding: '.25em .4em',
      backgroundColor: theme.palette.mode === 'dark' ? '#f5f5f5' : dark,
      color:
        theme.palette.mode === 'dark'
          ? 'rgba(0, 0, 0, 0.87)'
          : theme.palette.common.white,
      transform: '225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
    },
    '.badge-primary': {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.primary.contrastText
    },
    '.badge-secondary': {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.secondary.contrastText
    },
    '.badge-danger': {
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText
    },
    '.badge-light': {
      backgroundColor: '#ccc',
      color: 'rgba(0, 0, 0, 0.87)'
    },
    '.badge-dark': {
      backgroundColor: dark,
      color: '#fff'
    },
    '.badge-dark-transparent': {
      backgroundColor: 'rgba(0,0,0,0.5)',
      color: '#fff'
    },
    '.badge-light-transparent': {
      backgroundColor: 'rgba(0,0,0,0.2)',
      color: 'rgba(0, 0, 0, 0.87)'
    },
    '.embed-responsive': {
      position: 'relative',
      display: 'block',
      width: '100%',
      padding: 0,
      overflow: 'hidden',
      '&.embed-responsive-16by9': {
        paddingBottom: '56.25%'
      },
      '&.embed-responsive-4by3': {
        paddingBottom: '75%'
      },
      '&.embed-responsive-1by1': {
        paddingBottom: '100%'
      },
      '&.embed-responsive-3by2': {
        paddingBottom: '66.6%'
      }
    },
    '.embed-responsive-item': {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      width: '100%',
      height: '100%',
      border: 0
    },
    '.line-through': {
      textDecoration: 'line-through'
    },
    '.mh-100': {
      minHeight: '100% !important'
    },
    '.h-100': {
      height: '100% !important'
    },
    '.mw-100': {
      minWidth: '100% !important'
    },
    '.w-100': {
      width: '100% !important'
    },
    '.text-left': {
      textAlign: 'left'
    },
    '.text-center': {
      textAlign: 'center'
    },
    '.text-right': {
      textAlign: 'right'
    },
    '.text-justify': {
      textAlign: 'justify'
    },
    '.font-weight-bold': {
      fontWeight: 'bold !important'
    },
    '.font-weight-bolder': {
      fontWeight: 'bolder !important'
    },
    '.font-weight-light': {
      fontWeight: 'light !important'
    },
    '.font-weight-lighter': {
      fontWeight: 'lighter !important'
    },
    '.font-weight-normal': {
      fontWeight: 'normal !important'
    },
    '.font-weight-100': {
      fontWeight: '100 !important'
    },
    '.font-weight-200': {
      fontWeight: '200 !important'
    },
    '.font-weight-300': {
      fontWeight: '300 !important'
    },
    '.font-weight-400': {
      fontWeight: '400 !important'
    },
    '.font-weight-500': {
      fontWeight: '500 !important'
    },
    '.font-weight-600': {
      fontWeight: '600 !important'
    },
    '.font-weight-700': {
      fontWeight: '700 !important'
    },
    '.font-weight-800': {
      fontWeight: '800 !important'
    },
    '.font-weight-900': {
      fontWeight: '900 !important'
    },
    '.text-uppercase': {
      textTransform: 'uppercase'
    },
    '.text-monospace': {
      fontFamily:
        'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !important'
    },
    '.font-italic': {
      fontStyle: 'italic !important'
    },
    '.text-primary': {
      color: `${theme.palette.primary.main} !important`
    },
    '.text-black-50': {
      color: 'rgba(0,0,0,0.5) !important'
    },
    '.text-white-50': {
      color: 'rgba(255,255,255,0.5) !important'
    },
    '.text-secondary': {
      color: `${theme.palette.secondary.main} !important`
    },
    '.text-primary-text': {
      color: `${theme.palette.text.primary} !important`
    },
    '.text-primary-secondary': {
      color: `${theme.palette.text.secondary} !important`
    },
    '.text-muted': {
      color: `${theme.palette.text.disabled} !important`
    },
    '.text-white': {
      color: `${theme.palette.common.white} !important`
    },
    '.text-danger, .text-error': {
      color: `${theme.palette.error.main} !important`
    },
    '.text-warning': {
      color: `${theme.palette.warning.main} !important`
    },
    '.text-success': {
      color: `${theme.palette.success.main} !important`
    },
    '.text-info': {
      color: `${theme.palette.info.main} !important`
    },
    '.bg-primary': {
      backgroundColor: `${theme.palette.primary.main} !important`
    },
    '.bg-secondary': {
      backgroundColor: `${theme.palette.secondary.main} !important`
    },
    '.bg-danger': {
      backgroundColor: `${theme.palette.error.main} !important`
    },
    '.bg-white': {
      backgroundColor: `${theme.palette.common.white} !important`
    },
    '.bg-black': {
      backgroundColor: theme.palette.common.black
    },
    '.bg-dark': {
      backgroundColor: `${dark}!important`
    },
    '.bg-light': {
      backgroundColor: '#ccc !important'
    },
    'a.lm-link__button, a.MuiLink-root.MuiButton-root': {
      textDecoration: 'none',
      color: 'inherit'
    },
    '.lm-font-alt1': {
      fontFamily: theme.alternativeFont?.alt1
        ? `${theme.alternativeFont.alt1}!important`
        : undefined
    },
    '.lm-font-alt2': {
      fontFamily: theme.alternativeFont?.alt2
        ? `${theme.alternativeFont.alt2}!important`
        : undefined
    },
    '.lm-font-alt3': {
      fontFamily: theme.alternativeFont?.alt3
        ? `${theme.alternativeFont.alt3}!important`
        : undefined
    },
    '.lm-font-alt4': {
      fontFamily: theme.alternativeFont?.alt4
        ? `${theme.alternativeFont.alt4}!important`
        : undefined
    },
    '.d-none': {
      display: 'none!important'
    },
    '.d-inline-flex': {
      display: 'inline-flex!important'
    },
    '.d-block': {
      display: 'block!important'
    },
    '.d-inline-block': {
      display: 'inline-block!important'
    },
    '.text-1-row-max': {
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap'
    },
    '.text-2-rows-max': {
      display: '-webkit-box',
      textOverflow: 'ellipsis',
      minHeight: '3rem',
      overflow: 'hidden',
      webkitLineClamp: 2,
      webkitBoxOrient: 'vertical'
    },
    '.text-3-rows-max': {
      display: '-webkit-box',
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      minHeight: '4.5rem',
      webkitLineClamp: 3,
      webkitBoxOrient: 'vertical'
    },
    [theme.breakpoints.only('xs')]: {
      '.d-xs-inline-flex': {
        display: 'inline-flex!important'
      },
      '.d-xs-none': {
        display: 'none!important'
      },
      '.d-xs-block': {
        display: 'block!important'
      }
    },
    [theme.breakpoints.up('sm')]: {
      '.d-sm-inline-flex': {
        display: 'inline-flex!important'
      },
      '.d-sm-none': {
        display: 'none!important'
      },
      '.d-sm-block': {
        display: 'block!important'
      },
      '.text-sm-left': {
        textAlign: 'left'
      },
      '.text-sm-center': {
        textAlign: 'center'
      },
      '.text-sm-right': {
        textAlign: 'right'
      },
      '.text-sm-justify': {
        textAlign: 'justify'
      },
      ...genSpacing('-sm')
    },
    [theme.breakpoints.up('md')]: {
      '.d-md-inline-flex': {
        display: 'inline-flex!important'
      },
      '.d-md-none': {
        display: 'none!important'
      },
      '.d-md-block': {
        display: 'block!important'
      },
      '.text-md-left': {
        textAlign: 'left'
      },
      '.text-md-center': {
        textAlign: 'center'
      },
      '.text-md-right': {
        textAlign: 'right'
      },
      '.text-md-justify': {
        textAlign: 'justify'
      },
      ...genSpacing('-md')
    },
    [theme.breakpoints.up('lg')]: {
      '.d-lg-inline-flex': {
        display: 'inline-flex!important'
      },
      '.d-lg-none': {
        display: 'none!important'
      },
      '.text-lg-left': {
        textAlign: 'left!important'
      },
      '.text-lg-center': {
        textAlign: 'center'
      },
      '.text-lg-right': {
        textAlign: 'right'
      },
      '.text-lg-justify': {
        textAlign: 'justify'
      }
    }
  } as CSSObject
}