import { FCC, simpleMergeDeep } from 'onekijs-framework';
import React from 'react';
import { Palette, Theme, ThemeProps } from '../styles/typings';
import { BaseTheme, baseTheme } from './base';

export const tailwindPalette: Palette = {
  colors: {
    transparent: 'transparent',
    current: 'currentColor',
    black: '#000',
    white: '#fff',
    'gray-100': '#f7fafc',
    'gray-200': '#edf2f7',
    'gray-300': '#e2e8f0',
    'gray-400': '#cbd5e0',
    'gray-500': '#a0aec0',
    'gray-600': '#718096',
    'gray-700': '#4a5568',
    'gray-800': '#2d3748',
    'gray-900': '#1a202c',
    'red-100': '#fff5f5',
    'red-200': '#fed7d7',
    'red-300': '#feb2b2',
    'red-400': '#fc8181',
    'red-500': '#f56565',
    'red-600': '#e53e3e',
    'red-700': '#c53030',
    'red-800': '#9b2c2c',
    'red-900': '#742a2a',
    'orange-100': '#fffaf0',
    'orange-200': '#feebc8',
    'orange-300': '#fbd38d',
    'orange-400': '#f6ad55',
    'orange-500': '#ed8936',
    'orange-600': '#dd6b20',
    'orange-700': '#c05621',
    'orange-800': '#9c4221',
    'orange-900': '#7b341e',
    'yellow-100': '#fffff0',
    'yellow-200': '#fefcbf',
    'yellow-300': '#faf089',
    'yellow-400': '#f6e05e',
    'yellow-500': '#ecc94b',
    'yellow-600': '#d69e2e',
    'yellow-700': '#b7791f',
    'yellow-800': '#975a16',
    'yellow-900': '#744210',
    'green-100': '#f0fff4',
    'green-200': '#c6f6d5',
    'green-300': '#9ae6b4',
    'green-400': '#68d391',
    'green-500': '#48bb78',
    'green-600': '#38a169',
    'green-700': '#2f855a',
    'green-800': '#276749',
    'green-900': '#22543d',
    'teal-100': '#e6fffa',
    'teal-200': '#b2f5ea',
    'teal-300': '#81e6d9',
    'teal-400': '#4fd1c5',
    'teal-500': '#38b2ac',
    'teal-600': '#319795',
    'teal-700': '#2c7a7b',
    'teal-800': '#285e61',
    'teal-900': '#234e52',
    'blue-100': '#ebf8ff',
    'blue-200': '#bee3f8',
    'blue-300': '#90cdf4',
    'blue-400': '#63b3ed',
    'blue-500': '#4299e1',
    'blue-600': '#3182ce',
    'blue-700': '#2b6cb0',
    'blue-800': '#2c5282',
    'blue-900': '#2a3042',
    'indigo-100': '#ebf4ff',
    'indigo-200': '#c3dafe',
    'indigo-300': '#a3bffa',
    'indigo-400': '#7f9cf5',
    'indigo-500': '#667eea',
    'indigo-600': '#5a67d8',
    'indigo-700': '#4c51bf',
    'indigo-800': '#434190',
    'indigo-900': '#3c366b',
    'purple-100': '#faf5ff',
    'purple-200': '#e9d8fd',
    'purple-300': '#d6bcfa',
    'purple-400': '#b794f4',
    'purple-500': '#9f7aea',
    'purple-600': '#805ad5',
    'purple-700': '#6b46c1',
    'purple-800': '#553c9a',
    'purple-900': '#44337a',
    'pink-100': '#fff5f7',
    'pink-200': '#fed7e2',
    'pink-300': '#fbb6ce',
    'pink-400': '#f687b3',
    'pink-500': '#ed64a6',
    'pink-600': '#d53f8c',
    'pink-700': '#b83280',
    'pink-800': '#97266d',
    'pink-900': '#702459',
  },
};

export const tailwindTheme = (customTheme: Partial<Theme> = {}): Theme => {
  const theme = simpleMergeDeep(customTheme, { palette: tailwindPalette });
  return baseTheme(theme) as Theme;
};

export const TailwindTheme: FCC<ThemeProps> = (props) => {
  return <BaseTheme theme={tailwindTheme()} {...props} />;
};