/**
 * @format
 */
import { extendTheme } from '@chakra-ui/react'

export const vantagePlusTheme = extendTheme({
  styles: {
    global: {
      'html, body': {
        fontFamily: 'Roboto, Helvetica, Arial',
        fontSize: '16px',
        color: 'grey.900'
      }
    }
  },
  colors: {
    primary: '#E03C31',
    grey: {
      50: '#FAFAFA',
      100: '#F3F4F6',
      200: '#E4E4E7',
      300: '#D1D5DB',
      500: '#6B7280',
      700: '#374151',
      900: '#111928'
    },
    blue: {
      900: '#233876'
    },
    black: '#2C2C2C',
    darkGrey: '#505050',
    white: '#fff'
  },

  components: {
    Button: {
      baseStyle: {
        px: '20px',
        py: '10px',
        borderRadius: '4px',
        justifyContent: 'center',
        minWidth: ['60px', '60px', '60px', '150px'],
        fontFamily: 'Roboto-Medium',
        fontWeight: '400',
        fontSize: '14px'
      },
      variants: {
        primary: {
          bg: 'primary',
          color: 'white',
          fontSize: '14px',
          fontFamily: 'Roboto-Medium'
        },

        outline: {
          bg: 'white',
          color: 'grey.900',
          fontSize: '14px',
          borderColor: 'grey.900',
          fontFamily: 'Roboto-Medium'
        },

        menu: {
          border: '1px solid',
          borderColor: 'grey.300',
          textAlign: 'left',
          overflow: 'hidden'
        },

        moreMenu: {
          border: 'none',
          minWidth: ['30px', '30px', '30px', '0px'],
          fontSize: '14px'
        },
        roundedGroupLeft: {
          border: '1px solid',
          borderRadius: '4px 0px 0px 4px',
          bg: 'white',
          color: 'grey.900',
          fontSize: '14px',
          borderColor: 'grey.900',
          fontFamily: 'Roboto-Medium',
          minWidth: '76px',
          mr: '2px'
        },
        roundedGroupRight: {
          border: '1px solid',
          borderRadius: '0px 4px 4px 0px',
          bg: 'white',
          color: 'grey.900',
          fontSize: '14px',
          borderColor: 'grey.900',
          fontFamily: 'Roboto-Medium',
          minWidth: '76px',
          ml: '2px'
        },
        squared: {
          border: '1px solid',
          borderRadius: '0px',
          bg: 'white',
          color: 'grey.900',
          fontSize: '14px',
          borderColor: 'grey.900',
          fontFamily: 'Roboto-Medium',
          minWidth: '76px'
        }
      },
      defaultProps: {
        variant: 'outline'
      }
    },
    MenuItemOption: {
      baseStyle: {
        fontSize: '14px'
      }
    },
    Input: {
      baseStyle: {},
      variants: {
        standardVariant: {
          field: {
            px: 5,
            py: 3,
            h: '44px',
            border: '1px solid',
            borderColor: 'grey.300',
            borderRadius: '8px'
          },
          addon: {
            fontSize: '14px',
            bg: 'grey.50',
            color: 'grey.900',
            h: '44px',
            px: '0',
            border: '1px solid',
            borderColor: 'grey.300',
            minWidth: '55px',
            align: 'center',
            borderRadius: '8px',
            justifyContent: 'center',
            cursor: 'pointer'
          }
        }
      },
      defaultProps: {
        variant: 'standardVariant'
      }
    },
    Select: {
      variants: {
        standardVariant: {
          field: {
            width: '100%',
            px: 5,
            py: 3,
            h: '44px',
            border: '1px solid',
            borderColor: 'grey.300'
          }
        }
      },
      defaultProps: {
        variant: 'standardVariant'
      }
    },
    FormLabel: {
      baseStyle: {
        marginBottom: '4px',
        fontWeight: '500',
        fontFamily: 'Roboto-Medium',
        fontSize: '14px'
      }
    },

    Heading: {
      baseStyle: {
        fontFamily: 'Roboto-Medium',
        color: 'grey.900',
        fontWeight: '500',
        lineHeight: '150%'
      },
      variants: {
        size18: {
          fontSize: ['18px', '18px', '18px', '18px', '18px']
        },
        size16: {
          fontSize: ['16px', '16px', '16px', '16px', '16px']
        },
        size12: {
          fontSize: ['12px', '12px', '12px', '12px', '12px'],
          fontFamily: 'Roboto-Medium',
          color: 'grey.900'
        }
      }
    },
    Text: {
      baseStyle: {
        fontSize: ['14px', '14px', '14px', '14px', '14px'],
        lineHeight: '20px',
        color: 'grey.900'
      },
      variants: {
        bold: {
          fontWeight: 'bold'
        },
        justify: {
          textAlign: 'justify'
        }
      }
    }
  }
})