import React, { FunctionComponent } from 'react';
import { createTheming } from '@callstack/react-theme-provider';
import { MuiThemeProvider, PaletteColorOptions } from '@material-ui/core';
import { createTheme } from '@material-ui/core/styles';
import { darken, lighten, invert } from 'polished';
import { ThemeObject } from './types.d';

export const LightTheme: ThemeObject = {
  active: null,
  background: {
    light: '#FFF',
    darker: '#FAFAFB',
    inverse: '#13131A',
    shadow: '#44444F1A',
  },
  text: {
    white: '#FAFAFB',
    main: '#171725',
    secondary: '#696974',
    hint: '#92929D',
    inverse: '#FAFAFB',
  },
  pallet: {
    primaryColor: '#0062FF',
    primaryLight: '#50B5FF',
    secondaryColor: '#f5a900',
    white: '#FFFFFF',
    black: '#000000',
    lightGreen: '#3DD598',
    gray: '#F1F1F5',
    gray20: '#E2E2EA',
    gray50: '#92929D',
    orange: '#FF974A',
    purple: '#A461D8',
    yellow: '#FFC542',
    pink: '#FF9AD5',
    green: '#82C43C',
    blue: '#50B5FF',
    error: '#FC5A5A',
    mainText: '#171725',
  },
  type: 'light',
};

export const DarkTheme: ThemeObject = {
  active: '#FAFAFB',
  background: {
    light: '#1C1C24',
    darker: '#13131A',
    inverse: '#F1F1F5',
    shadow: '#92929D1A',
  },
  text: {
    white: '#FAFAFB',
    main: '#FAFAFB',
    secondary: '#B5B5BE',
    hint: '#E2E2EA',
    inverse: '#171725',
  },
  pallet: {
    primaryColor: '#0054db',
    primaryLight: '#27a4ff',
    secondaryColor: '#FF974A',
    white: '#FFFFFF',
    black: '#000000',
    lightGreen: '#3DD598',
    gray: '#4F4F5A',
    gray20: '#B5B5BE',
    gray50: '#E2E2EA',
    orange: '#FF974A',
    purple: '#A461D8',
    yellow: '#FFC542',
    pink: '#FF9AD5',
    green: '#82C43C',
    blue: '#50B5FF',
    error: '#FC5A5A',
    mainText: '#FAFAFB',
  },
  type: 'dark',
};

const getMaterialUiColor = (color: string): PaletteColorOptions => {
  return { main: color, light: lighten(0.2, color), dark: darken(0.2, color), contrastText: invert(color) };
};

const getMuiTheme = (theme: ThemeObject) =>
  createTheme({
    palette: {
      error: getMaterialUiColor(theme.pallet.error),
      primary: getMaterialUiColor(theme.pallet.primaryColor),
      secondary: getMaterialUiColor(theme.pallet.secondaryColor),
      divider: theme.pallet.gray,
      text: {
        primary: theme.text.main,
        secondary: theme.text.secondary,
        hint: theme.text.hint,
      },
    },
    overrides: {
      MuiPaper: {
        root: {
          backgroundColor: 'transparent',
          border: `1px solid ${theme.background.darker}`,
          boxShadow: `0px 5px 15px 0px ${theme.background.shadow}`,
        },
      },
      MuiMenu: {
        list: {
          backgroundColor: theme.background.light,
          color: theme.text.secondary,
          border: 'none',
        },
      },
      MuiMenuItem: {
        root: {
          '&$selected': {
            color: theme.pallet.primaryColor,
            backgroundColor: 'transparent',
            '&:hover': {
              backgroundColor: 'transparent',
            },
          },
          '&:hover': {
            backgroundColor: 'transparent',
          },
        },
      },
      MuiInput: {
        underline: {
          '&:before': {
            borderBottom: `1px solid ${theme.pallet.gray20}`,
          },
          '&:after': {
            // borderBottom: `2px solid ${theme.pallet.gray20}`,
          },
          '&:hover:not($disabled):not($focused):not($error):before': {
            transition: 'all 0.25s',
            borderWidth: '2px',
            borderColor: darken(0.2, theme.pallet.gray20),
          },
        },
        root: {
          borderColor: theme.pallet.gray20,
          '&$disabled': {
            opacity: '0.5',
            color: theme.text.main,
          },
        },
      },
      MuiOutlinedInput: {
        root: {
          transition: 'all 0.25s',
          '& $notchedOutline': {
            borderWidth: '1px',
            borderColor: theme.pallet.gray20,
          },
          '&$focused $notchedOutline': {
            borderWidth: '2px',
            borderColor: theme.pallet.primaryColor,
          },
          '&:hover $notchedOutline': {
            transition: 'all 0.25s',
            borderColor: darken(0.2, theme.pallet.gray20),
          },
          '&$error $notchedOutline': {
            borderColor: theme.pallet.error,
          },
          '&$disabled $notchedOutline': {
            borderColor: theme.pallet.gray20,
          },
          // color: 'purple',
        },
        notchedOutline: {},
      },
      // MuiButton: {
      //   outlined: {
      //     borderColor: 'purple',
      //     color: 'red',
      //   },
      //   outlinedPrimary: {
      //     borderColor: 'brown',
      //   },
      // },
      MuiCheckbox: {
        colorSecondary: {
          color: theme.pallet.gray20,
          '&:hover': {
            backgroundColor: 'unset',
          },
        },
      },
      // Calendar
      MuiPickersDay: {
        day: {
          color: theme.text.main,
          '&:hover': {
            color: theme.pallet.primaryColor,
            border: `1px solid ${theme.pallet.primaryColor}`,
          },
        },
        daySelected: {
          color: theme.pallet.primaryColor,
          border: `1px solid ${theme.pallet.primaryColor}`,
          background: 'none',
          backgroundColor: 'none',
        },
        dayDisabled: {
          color: theme.text.secondary,
        },
        hidden: {
          color: theme.text.secondary,
        },
        current: {
          color: theme.pallet.primaryColor,
        },
      },
      MuiPickersCalendarHeader: {
        transitionContainer: {
          color: theme.text.main,
        },
        iconButton: {
          color: theme.pallet.gray50,
          '&:hover': {
            color: theme.pallet.primaryColor,
          },
          '&disabled': {
            color: theme.pallet.gray20,
          },
        },
        dayLabel: {
          color: theme.pallet.gray50,
        },
      },
      MuiPickersMonth: {
        root: {
          color: theme.text.main,
          '&:hover': {
            color: theme.pallet.primaryColor,
          },
        },
      },
      MuiPickersToolbarButton: {
        toolbarBtn: {
          color: theme.text.white,
        },
      },
      //  Calendar END
    },
  });

// eslint-disable-next-line @typescript-eslint/unbound-method
const { ThemeProvider: Provider, withTheme, useTheme } = createTheming(LightTheme);

export const ThemeProvider: FunctionComponent<{ theme: ThemeObject }> = ({ theme, children }) => {
  const MuiTheme = getMuiTheme(theme);
  return (
    <Provider theme={theme}>
      <MuiThemeProvider theme={MuiTheme}>{children}</MuiThemeProvider>
    </Provider>
  );
};

export { withTheme, useTheme };

export type { ThemeObject };
