import { ICustomTheme, extendTheme } from 'native-base';
import { COLORS } from './colors';
import { Theme } from '@react-navigation/native';

export const NavigationDefaultTheme: Theme = {
  dark: false,
  colors: {
    primary: COLORS.blue[500],
    background: COLORS.gray[200],
    card: COLORS.gray[200],
    text: COLORS.gray[900],
    border: 'transparent',
    notification: COLORS.red[700],
  },
};

export const NavigationDarkTheme: Theme = {
  dark: true,
  colors: {
    primary: COLORS.blue[600],
    background: COLORS.gray[900],
    card: COLORS.gray[900],
    text: COLORS.white,
    border: 'transparent',
    notification: COLORS.red[700],
  },
};

const customTheme: ICustomTheme = {
  colors: {
    ...COLORS,
    primary: COLORS.blue,
    secondary: COLORS.gray,
  },
  components: {
    Text: {
      baseStyle: {
        color: COLORS.gray[900],
        _dark: {
          color: COLORS.white,
        },
      },
    },
    Heading: {
      baseStyle: {
        color: COLORS.gray[900],
        _dark: {
          color: COLORS.white,
        },
      },
    },
    Radio: {
      defaultProps: {
        size: 'sm',
      },
      baseStyle: {
        _checked: { borderColor: COLORS.blue[600], _icon: { color: COLORS.blue[600] } },
        _dark: {
          borderColor: COLORS.gray[500],
          bg: COLORS.gray[900],
        },
      },
    },
    Checkbox: {
      baseStyle: {
        _icon: { color: COLORS.white },
        _checked: { borderColor: COLORS.blue[600], bg: COLORS.blue[600] },
        _dark: {
          borderColor: COLORS.gray[500],
          bg: COLORS.gray[900],
        },
      },
    },
    AvatarBadge: {
      baseStyle: {
        bg: COLORS.green[600],
        _dark: { bg: COLORS.green[500], borderColor: COLORS.gray[800] },
      },
    },
    Avatar: {
      baseStyle: () => ({
        bg: COLORS.white,
        borderColor: COLORS.white,
        _dark: { bg: COLORS.gray[700], borderColor: COLORS.gray[600] },
      }),
    },
    Divider: {
      baseStyle: {
        bg: COLORS.gray[200],
        _dark: { bg: COLORS.gray[600] },
      },
    },
    Slider: {
      baseStyle: {
        height: 25,
      },
      defaultProps: {
        size: 'lg',
      },
    },
    SliderTrack: {
      baseStyle: {
        style: {
          height: 10,
        },
      },
    },
    SliderFilledTrack: {
      baseStyle: {
        bg: COLORS.blue[600],
        style: {
          height: 10,
        },
        _dark: { bg: COLORS.blue[600] },
      },
    },
    SliderThumb: {
      baseStyle: {
        bg: COLORS.blue[600],
        style: {
          height: 25,
        },
        _pressed: {
          _interactionBox: {
            borderWidth: '4',
            borderColor: COLORS.blue[600],
          },
        },
        _dark: {
          bg: COLORS.blue[700],
          _pressed: {
            _interactionBox: {
              borderWidth: '4',
              borderColor: COLORS.blue[700],
            },
          },
        },
      },
    },
    Button: {
      baseStyle: {
        borderRadius: 12,
      },
    },
    Input: {
      baseStyle: {
        p: 2,
        borderRadius: 12,
        bg: COLORS.gray[50],
        _dark: {
          bg: COLORS.gray[800],
        },
      },
    },
    InputLeftAddon: {
      baseStyle: {
        p: 2,
        borderLeftRadius: 12,
        bg: COLORS.gray[100],
        _text: {
          color: COLORS.gray[900],
        },
        _dark: {
          bg: COLORS.gray[700],
        },
      },
    },
    InputRightAddon: {
      baseStyle: {
        p: 2,
        borderRightRadius: 12,
        bg: COLORS.gray[100],
        _text: {
          color: COLORS.gray[900],
        },
        _dark: {
          bg: COLORS.gray[700],
        },
      },
    },
    Switch: {
      baseStyle: {
        thumbColor: COLORS.gray[100],
        onThumbColor: COLORS.blue[900],
        offThumbColor: COLORS.blue[900],

        _dark: {
          offTrackColor: COLORS.blue[900],
          onTrackColor: COLORS.blue[600],
        },
      },
    },
    ModalHeader: {
      baseStyle: {
        bg: COLORS.gray[50],
        borderColor: COLORS.gray[300],
        _dark: { borderColor: COLORS.gray[300], bg: COLORS.gray[700] },
      },
    },
    Modal: {
      baseStyle: { _slide: { duration: 120 } },
    },
    ModalContent: {
      baseStyle: () => ({
        rounded: 12,
        bg: COLORS.gray[50],
        _dark: { bg: COLORS.gray[700] },
      }),
    },
    SelectItem: {
      baseStyle: {
        p: '32px',
        px: '32px',
        borderRadius: '12',
      },
    },
  },
  config: {
    useSystemColorMode: true,
  },
};
export const extendedTheme = extendTheme(customTheme);
