import React, { memo, useCallback, useMemo } from 'react'

import { StyleSheet, View, Text, ImageBackground, TouchableOpacity, InteractionManager } from 'react-native'
import { useGetter, useDispatch } from '@/store'

import SubTitle from '../components/SubTitle'
import CheckBoxItem from '../components/CheckBoxItem'
import { useTranslation } from '@/plugins/i18n'
import { getIsSupportedAutoTheme } from '@/utils/tools'
const isSupportedAutoTheme = getIsSupportedAutoTheme()

const useActive = id => {
  const activeThemeId = useGetter('common', 'activeThemeId')
  const isActive = useMemo(() => activeThemeId == id, [activeThemeId, id])
  return isActive
}

const ThemeItem = ({ id, color, image, setTheme }) => {
  const theme = useGetter('common', 'theme')
  const isActive = useActive(id)
  const { t } = useTranslation()
  return (
    <TouchableOpacity style={styles.item} activeOpacity={0.5} onPress={() => setTheme(id)}>
      <View style={{ ...styles.colorContent, backgroundColor: theme.primary, borderColor: isActive ? color : 'transparent' }}>
        {
          image
            ? <ImageBackground source={image} style={styles.image} />
            : <View style={{ ...styles.image, backgroundColor: color }}></View>
        }
      </View>
      <Text style={{ ...styles.name, color: isActive ? color : theme.normal }} numberOfLines={1}>{t(`theme_${id}`)}</Text>
    </TouchableOpacity>
  )
}

export default memo(() => {
  const { t } = useTranslation()
  const themeList = useGetter('common', 'themeList')
  const themes = useMemo(() => themeList.map(theme => ({ id: theme.id, color: theme.colors.secondary })), [themeList])
  const setTheme = useDispatch('common', 'setTheme')
  const setThemeId = useCallback((id) => {
    InteractionManager.runAfterInteractions(() => {
      setTheme(id)
    })
  }, [setTheme])

  const isAutoTheme = useGetter('common', 'isAutoTheme')
  const setIsAutoTheme = useDispatch('common', 'setIsAutoTheme')

  return (
    <SubTitle title={t('setting_basic_theme')}>
      <View style={styles.list}>
        {
          themes.map(({ id, color, image }) => <ThemeItem key={id} color={color} image={image} id={id} setTheme={setThemeId} />)
        }
      </View>

      {
        isSupportedAutoTheme
          ? (
              <View style={{ marginTop: 25, marginLeft: -25 }}>
                <CheckBoxItem check={isAutoTheme} onChange={setIsAutoTheme} label={t('setting_basic_theme_auto_theme')} />
              </View>
            )
          : null
      }

    </SubTitle>
  )
})

const styles = StyleSheet.create({
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item: {
    marginRight: 15,
    alignItems: 'center',
    width: 54,
    marginTop: 5,
    // backgroundColor: 'rgba(0,0,0,0.2)',
  },
  colorContent: {
    width: 32,
    height: 32,
    borderRadius: 4,
    borderWidth: 1.6,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 26,
    height: 26,
    borderRadius: 4,
  },
  name: {
    marginTop: 2,
    fontSize: 13,
  },
})