import { FCC, get, set, simpleMergeDeep } from 'onekijs-framework';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { ColorKeys, Theme, ThemeProps } from '../styles/typings';
import { darken, lighten } from '../utils/color';

export const baseTheme = (customTheme: Partial<Theme> = {}): Theme => {
  const theme: Partial<Theme> = {
    breakpoints: {
      xs: '576px',
      sm: '768px',
      md: '992px',
      lg: '1200px',
      xl: '1850px',
    },
    colors: {
      white: 'white',
      lightest: 'gray-100',
      lighter: 'gray-200',
      light: 'gray-400',
      dark: 'gray-600',
      darker: 'gray-700',
      darkest: 'gray-900',
      black: 'black',
      success: 'green-500',
      info: 'blue-500',
      warning: 'yellow-500',
      danger: 'red-500',
      primary: 'blue-500',
      secondary: 'blue-900',
      blue: 'blue-500',
      red: 'red-500',
      purple: 'purple-500',
      pink: 'pink-500',
      indigo: 'indigo-500',
      teal: 'teal-500',
      orange: 'orange-500',
      yellow: 'yellow-500',
      green: 'green-500',
      lightblue: 'blue-200',
      lightred: 'red-200',
      lightpurple: 'purple-200',
      lightpink: 'pink-200',
      lightindigo: 'indigo-200',
      lightteal: 'teal-200',
      lightorange: 'orange-200',
      lightyellow: 'yellow-200',
      lightgreen: 'green-200',
      background: 'white',
    },
    palette: {},
    spacings: {
      none: '0',
      '2xs': '0.125rem',
      xs: '0.25rem',
      sm: '0.5rem',
      md: '0.75rem',
      lg: '1rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '2rem',
      '4xl': '2.5rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
      '8xl': '6rem',
      '9xl': '8rem',
      '10xl': '10rem',
      '11xl': '12rem',
      '12xl': '14rem',
      '13xl': '16rem',
      px: '1px',
    },

    font: {
      families: {
        sans: 'Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
        serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
        mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
      },
      lineHeights: {
        none: 1,
        xs: 1.25,
        sm: 1.375,
        md: 1.5,
        lg: 1.625,
        xl: 2,
        '2xl': 2.5,
        '3xl': 3,
        '4xl': 4,
      },
      sizes: {
        '2xs': '.625rem',
        xs: '.75rem',
        sm: '.875rem',
        md: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
        default: '.875rem',
      },
      spacings: {
        xs: '-0.05em',
        sm: '-0.025em',
        md: 0,
        lg: '0.025em',
        xl: '0.05em',
        '2xl': '0.1em',
      },
      weights: {
        hairline: 100,
        thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
        extrabold: 800,
        black: 900,
      },
    },
    radius: {
      none: 0,
      '2xs': '0.625rem',
      xs: '0.125rem',
      sm: '0.25rem',
      md: '0.375rem',
      lg: '0.5rem',
      xl: '0.625rem',
      full: '9999px',
    },
    shadow: {
      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
      sm: '1px 1px 5px hsl(198, 0%, 91%)',
      md: ' 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
      none: 'none',
    },

    sizes: {
      0: 0,
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      8: '2rem',
      10: '2.5rem',
      12: '3rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      32: '8rem',
      40: '10rem',
      48: '12rem',
      56: '14rem',
      64: '16rem',
      px: '1px',
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      'screen-sm': '640px',
      'screen-md': '768px',
      'screen-lg': '1024px',
      'screen-xl': '1280px',
    },

    fieldLayout: {
      marginY: 'xs',
      helperColor: 'primary',
      helperMarginLeft: 'sm',
      helperMarginRight: 'xs',
      descriptionFontSize: 'sm',
      descriptionColor: 'gray-600',
    },

    table: {
      bgColor: 'white',
      shadow: 'none',
      thPaddingX: 'md',
      thPaddingY: 'md',
      thBorderBottomWidth: '1px',
      thBorderBottomColor: 'lightest',
      thBgColor: 'lightest',
      thFontWeigth: 'semibold',
      thFontColor: 'primary',
      thFontCase: 'uppercase',
      thFontSize: 'xs',
      thLetterSpacing: 'xl',
      thFilterInputBgColor: 'lighter',
      thFilterInputFontSize: 'sm',
      thFilterInputPaddingX: 'xs',
      thFilterInputPaddingY: '2xs',
      tdFontColor: 'darkest',
      tdFontSize: 'xs',
      tdPaddingX: 'md',
      tdPaddingY: 'sm',
      tdBorderBottomColor: 'light',
      tdBorderBottomStyle: 'solid',
      tdBorderBottomWidth: '1px',
      tdStripBgColor: 'lightest',
      tdHoverBgColor: 'primary',
      tdHoverFontColor: 'inherit',
      tdExpandedBgColor: 'lightest',
      loadingRowBgColor: 'lightest',
      loadingRowMinHeight: '40px',
    },

    input: {
      bgColor: 'white',
      width: 'full',
      borderWidth: 1,
      borderColor: 'light',
      borderRadius: 'sm',
      borderStyle: 'solid',
      borderFocusColor: 'primary',
      borderFocusWidth: 2,
      paddingX: 'sm',
      paddingY: 'xs',
      xsPaddingX: 'sm',
      xsPaddingY: 0,
      xsFontSize: 'sm',
      smPaddingX: 'sm',
      smPaddingY: 'xs',
      smFontSize: 'sm',
      mdPaddingX: 'sm',
      mdPaddingY: 'sm',
      mdFontSize: 'default',
      lgPaddingX: 'sm',
      lgPaddingY: 'md',
      lgFontSize: 'default',
      xlPaddingX: 'sm',
      xlPaddingY: 'lg',
      xlFontSize: 'lg',
      appearance: 'none',
      outline: 'none',
      fontColor: 'darkest',
      placeholderColor: 'light',
    },

    textarea: {
      bgColor: 'white',
      width: 'full',
      borderWidth: 1,
      borderColor: 'light',
      borderRadius: 'sm',
      borderStyle: 'solid',
      borderFocusColor: 'primary',
      borderFocusWidth: 2,
      paddingX: 'sm',
      paddingY: 'xs',
      xsPaddingX: 'sm',
      xsPaddingY: 0,
      xsFontSize: 'sm',
      smPaddingX: 'sm',
      smPaddingY: 'xs',
      smFontSize: 'sm',
      mdPaddingX: 'sm',
      mdPaddingY: 'sm',
      mdFontSize: 'default',
      lgPaddingX: 'sm',
      lgPaddingY: 'md',
      lgFontSize: 'default',
      xlPaddingX: 'sm',
      xlPaddingY: 'lg',
      xlFontSize: 'lg',
      appearance: 'none',
      outline: 'none',
      fontColor: 'darkest',
      placeholderColor: 'light',
    },

    label: {
      fontWeight: 'medium',
      fontCase: 'none',
      fontColor: 'darker',
      fontSize: 'inherit',
      letterSpacing: 'md',
      requiredColor: 'danger',
      requiredWeight: 'bold',
      requiredMarginLeft: 'xs',
      helperIconColor: 'primary',
      helperMarginLeft: 'sm',
    },

    link: {
      fontWeight: 'normal',
      fontColor: 'primary',
      textDecoration: 'none',
      fontWeightHover: 'normal',
      fontColorHover: 'primary',
      textDecorationHover: 'underline',
    },

    checkbox: {
      color: 'primary',
      bgColor: 'white',
    },

    dashboard: {
      left: {
        bgColor: 'lighter',
      },
      header: {
        bgColor: 'secondary',
      },
      body: {
        bgColor: 'background',
      },
      right: {
        bgColor: 'lighter',
      },
      footer: {
        bgColor: 'lighter',
      },
    },
    tab: {
      activeBgColor: 'inherit',
      activeBorderColor: 'primary',
      activeBorderStyle: 'solid',
      activeBorderWidth: '2px',
      activeFontSize: 'inherit',
      activeFontColor: 'primary',
      activeFontWeight: 'semibold',
      bgColor: 'inherit',
      borderColor: 'lighter',
      borderRadius: 'sm',
      borderStyle: 'solid',
      borderWidth: '1px',
      cursor: 'pointer',
      fontColor: 'inherit',
      fontSize: 'inherit',
      fontWeight: 'inherit',
      hoverBgColor: 'lightest',
      hoverBorderColor: 'dark',
      hoverBorderStyle: 'solid',
      hoverBorderWidth: '2px',
      hoverFontColor: 'inherit',
      marginBefore: 'xs',
      marginAfter: 'xs',
      paddingX: 'md',
      paddingY: 'xs',
    },

    card: {
      borderColor: 'gray-300',
      borderRadius: 'sm',
      borderStyle: 'solid',
      borderWidth: '1px',
      shadow: 'sm',
      bgColor: 'white',
      fontColor: 'primary',
      fontCase: 'uppercase',
      fontSize: 'inherit',
      fontWeight: 'bold',
      paddingX: 'lg',
      paddingY: 'lg',
      iconColor: 'primary',
      iconWidth: '16px',
      iconHeight: '16px',
      marginTop: '2xl',
      letterSpacing: '2xl',
      titleBorderBottomWidth: '1px',
    },

    properties: {
      fontWeight: 'bold',
      paddingY: 'xs',
    },

    modal: {
      bgColor: 'background',
      maskColor: 'darkest',
      maskOpacity: '0.85',
      zIndex: 1050,
      xsmallSize: '20%',
      smallSize: '30%',
      mediumSize: '50%',
      largeSize: '75%',
      xlargeSize: '90%',
      boxShadow: 'none',
      borderRadius: 'sm',
    },

    wizard: {
      activeBgColor: 'blue-100',
      activeBorderColor: 'primary',
      activeFontSize: 'inherit',
      activeFontColor: 'primary',
      activeFontWeight: 'bold',
      bgColor: 'lighter',
      borderColor: 'light',
      borderRadius: 0,
      borderStyle: 'solid',
      borderWidth: '3px',
      cursor: 'pointer',
      disabledBgColor: 'inherit',
      disabledBorderColor: 'inherit',
      disabledFontSize: 'inherit',
      disabledFontColor: 'light',
      disabledFontWeight: 'inherit',
      errorBgColor: 'red-100',
      errorBorderColor: 'danger',
      errorFontColor: 'danger',
      fontColor: 'inherit',
      fontSize: 'inherit',
      fontWeight: 'medium',
      hoverBgColor: 'light',
      hoverBorderColor: 'inherit',
      hoverBorderStyle: 'inherit',
      hoverBorderWidth: 'inherit',
      hoverFontColor: 'inherit',
      marginBefore: 0,
      marginAfter: 0,
      modalStepsBgColor: 'lighter',
      modalStepsBorderColor: 'light',
      modalStepsBorderStyle: 'solid',
      modalStepsBorderWidth: '1px',
      paddingRight: 'lg',
      paddingLeft: 'lg',
      paddingTop: 'sm',
      paddingBottom: 'sm',
      stepsBgColor: 'none',
      stepsBorderColor: 'blue-200',
      stepsBorderStyle: 'solid',
      stepsBorderWidth: '1px',
      stepsPaddingTop: 'lg',
      stepsPaddingBottom: 'lg',
      stepsPaddingLeft: 'xl',
      stepsPaddingRight: 0,
      successBgColor: 'green-100',
      successBorderColor: 'success',
      successFontColor: 'success',
      warningBgColor: 'yellow-100',
      warningBorderColor: 'warning',
      warningFontColor: 'warning',
    },
  };

  theme.accordion = {
    fontWeight: 'bold',
    fontColor: 'inherit',
    activeFontColor: 'lightest',
    hoverFontColor: 'inherit',
    fontSize: 'inherit',
    togglerIconWidth: 'md',
    togglerIconHeight: 'md',
    bgColor: 'inherit',
    activeBgColor: 'primary',
    hoverBgColor: lighten(get<any>(theme.colors, 'primary', ''), 400),
    borderColor: 'light',
    borderRadius: 'xl',
    borderStyle: 'solid',
    borderWidth: '1px',
    paddingX: 'sm',
    paddingY: 'sm',
  };

  // set(theme.table, 'thFilterInputBgColor', lighten(get(theme.colors, 'primary', ''), 400));
  set<any>(theme.table, 'tdHoverBgColor', lighten(get<any>(theme.colors, 'primary', ''), 400));

  Object.keys(ColorKeys).forEach((kind) => {
    set<any>(theme, `buttons.${kind}`, {
      bgColor: kind,
      bgColorFlat: 'transparent',
      bgColorOutline: 'transparent',
      borderColor: kind,
      borderColorFlat: 'transparent',
      borderColorOutline: kind,
      borderRadiusMedium: 'sm',
      borderRadiusSmall: 'sm',
      borderRadiusLarge: 'sm',
      borderStyle: 'solid',
      borderWidthSmall: 1,
      borderWidthMedium: 1,
      borderWidthLarge: 1,
      color: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darker' : 'white',
      colorFlat: kind,
      colorOutline: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'darkest' : kind,
      cursor: 'pointer',
      cursorDisabled: 'not-allowed',
      fontSizeMedium: 'md',
      fontSizeSmall: 'sm',
      fontSizeLarge: 'lg',
      fontWeight: 'bold',
      hoverColor: ['light', 'lightest', 'lighter', 'white'].includes(kind) ? 'black' : 'white',
      hoverColorFlat: lighten(get<any>(theme.colors, kind, ''), 100),
      hoverColorOutline: kind,
      hoverBgColor: darken(get<any>(theme.colors, kind, ''), 100),
      hoverBgColorFlat: 'transparent',
      hoverBgColorOutline: lighten(get<any>(theme.colors, kind, ''), 400),
      hoverBorderColor: darken(get<any>(theme.colors, kind, ''), 100),
      hoverBorderColorFlat: 'transparent',
      hoverBorderColorOutline: kind,
      letterSpacingMedium: 'normal',
      letterSpacingSmall: 'normal',
      letterSpacingLarge: 'normal',
      lineHeightMedium: '3xl',
      lineHeightSmall: '2xl',
      lineHeightLarge: '4xl',
      opacity: 1,
      opacityDisabled: 0.6,
      paddingYMedium: 'none',
      paddingYSmall: 'none',
      paddingYLarge: 'none',
      paddingXMedium: 'lg',
      paddingXSmall: 'md',
      paddingXLarge: 'xl',
      textOverflow: 'ellipsis',
      textTransform: 'none',
      whiteSpace: 'nowrap',
    });

    set<any>(theme, `tooltip.${kind}`, {
      bgColor: kind,
      color: ['light', 'lightest', 'white'].includes(kind) ? 'darkest' : 'white',
      linkColor: ['light', 'lightest', 'white'].includes(kind)
        ? 'primary'
        : lighten(get<any>(theme.colors, 'primary', ''), 200),
      borderColor: kind,
      borderRadius: 'sm',
      borderStyle: 'solid',
      borderWidth: '1px',
      boxShadow: 'lg',
      padding: 'md',
      fontSize: 'sm',
    });
  });

  return simpleMergeDeep(customTheme, theme);
};

export const BaseTheme: FCC<ThemeProps> = ({ theme, children }) => {
  const t = baseTheme(theme);
  const GlobalStyles = t.GlobalStyles;
  return (
    <>
      {GlobalStyles && <GlobalStyles theme={t} />}
      <ThemeProvider theme={t}>{children}</ThemeProvider>
    </>
  );
};