import { createTheme } from '@material-ui/core/styles';
import React from 'react';
import { CircleAlert, CircleCheckBig, Info, TriangleAlert } from 'lucide-react';

import { MUI_SPACING_UNIT } from '../constants';
import { Colors } from '../constants/styles';

const cssReset = {
  fieldset: {
    border: 0,
    margin: 0,
    minWidth: 0,
    padding: 0,
  },
  html: {
    interpolateSize: 'allow-keywords',
    textWrap: 'pretty',
  },
  button: { font: 'inherit' },
  ':where(button, figcaption, h1, h2, h3, h4, h5, h6, label)': {
    textWrap: 'balance',
  },
  ':where(button, input, textarea, select)': {
    touchAction: 'manipulation',
  },
  ':where(hr)': {
    borderBlockEnd: `1px solid ${Colors.outline}`,
    borderBlockStart: 0,
    borderInline: 0,
    inlineSize: '100%',
    margin: 0,
  },
  iframe: {
    border: 0,
  },
  /**
   * WebKit doesn’t apply implicit ‘list’ role from <ol>s and <ul>s when list-style-type is
   * ‘none’ unless nested in a <nav>. Intentional on WebKit’s part, but usually undesirable.
   * @see https://bugs.webkit.org/show_bug.cgi?id=170179#c1
   */
  ":where(ol, ul)[role='list']": {
    listStyleType: 'none',
    marginBlock: 0,
    paddingInlineStart: 0,
  },
  pre: {
    marginBlock: 0,
  },
  'input:where([type="date"], [type="datetime-local"], [type="month"], [type="number"], [type="tel"], [type="time"])':
    {
      fontVariantNumeric: 'lining-nums tabular-nums',
    },
  ':where(table, time)': {
    fontVariantNumeric: 'lining-nums slashed-zero tabular-nums',
  },
  ':where(table)': {
    borderCollapse: 'collapse',
  },
  ':where(td, th)': {
    padding: 0,
  },
  ':where(th)': {
    textAlign: 'start',
  },
  '[popover]': {
    inset: 'auto',
  },
};

const themeConfig = {
  themeName: 'Tamanu',
  palette: {
    mode: 'light',
    primary: {
      main: Colors.primary,
      dark: Colors.primaryDark,
    },
    secondary: {
      main: Colors.secondary,
      dark: '#905a00',
    },
    error: {
      main: Colors.alert,
    },
    success: {
      main: Colors.safe,
    },
    text: {
      primary: Colors.darkestText,
      secondary: Colors.darkText,
      tertiary: Colors.midText,
    },
    background: {
      default: Colors.background,
      paper: Colors.white,
      header: '#EAF2FF', // taken from colors.scss::$main-light-blue-color
      light: '#F4F6F8', // taken from colors.scss::$main-light-gray-color
      main: '#eff2f5', // taken from colors.scss::$main-bg-color
    },
    action: {
      hover: Colors.veryLightBlue,
    },
    divider: Colors.outline,
    spacing: {
      unit: MUI_SPACING_UNIT,
    },
  },
  typography: {
    useNextVariants: true,
    fontFamily: 'Roboto',
  },
  shape: { borderRadius: 3 },
  overrides: {
    MuiCssBaseline: { '@global': cssReset },
    MuiCard: {
      root: {
        borderColor: Colors.outline,
      },
    },
    MuiOutlinedInput: {
      notchedOutline: {
        borderColor: Colors.outline,
      },
    },
    MuiFormHelperText: {
      root: {
        color: Colors.midText,
        fontSize: '11px',
        lineHeight: '1.4',
        marginBlockStart: '4px',
      },
    },
    MuiListItem: {
      button: {
        transition: 'none',
      },
    },
    MuiMenuItem: {
      root: {
        fontSize: 11,
        letterSpacing: '0.02em',
        paddingBlock: 4,
        paddingInline: 12,
      },
    },
    MuiTableCell: {
      root: {
        borderBottom: `1px solid ${Colors.outline}`,
      },
    },
  },
  // Required as we are now using the latest version of MUI, which has a different structure for component override
  components: {
    MuiAlert: {
      defaultProps: {
        iconMapping: {
          success: <CircleCheckBig />,
          info: <Info />,
          warning: <TriangleAlert />,
          error: <CircleAlert />,
        },
      },
    },
    MuiCard: {
      root: {
        borderColor: Colors.outline,
      },
    },
    MuiOutlinedInput: {
      notchedOutline: {
        borderColor: Colors.outline,
      },
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          color: Colors.midText,
          fontSize: '11px',
          lineHeight: '1.4',
          marginBlockStart: '4px',
        },
      },
    },
    MuiListItem: {
      styleOverrides: {
        button: {
          transition: 'none',
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontSize: 11,
          letterSpacing: '0.02em',
          paddingBlock: 4,
          paddingInline: 12,
        },
      },
    },
    MuiTab: {
      styleOverrides: {
        root: {
          minHeight: '48px',
          textTransform: 'none',
        },
      },
    },
    MuiTableCell: {
      styleOverrides: {
        root: {
          borderBottom: `1px solid ${Colors.outline}`,
        },
      },
    },
    MuiToggleButton: {
      styleOverrides: {
        root: {
          fontSize: '0.875rem',
          fontWeight: 400,
          minInlineSize: '4em',
          textTransform: 'none',
          '&.Mui-selected': {
            borderColor: Colors.primary,
          },
        },
      },
    },
  },
};

export const theme = createTheme(themeConfig);
