import React from "react";
import { FlatList, TouchableOpacity, View, Image } from "react-native";
import ColorAdjustView, { ColorAdjustViewProps } from "./ColorAdjustView";
import ColorTempAdjustView, { ColorTempAdjustViewProps } from "./ColorTempAdjustView";
import Spacer from "./Spacer";
import { TabBar, Utils } from "tuya-panel-kit";
import { ColorDisk } from "@tuya/tuya-panel-lamp-sdk";
import res from "../res";
const { convertX: cx } = Utils.RatioUtils
const { withTheme } = Utils.ThemeUtils

type TabsNode = {
  key: number | string
  title: string
}
interface StripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
  lampTabs: TabsNode[]
  activeKey: number | string
  onActiveKeyChange: (key: number | string) => void
  colorDiskActiveKey? : number | undefined
  onColorDiskChange?: (color: string[], idx: number) => void
}

const StripAdjustView = (props: StripAdjustViewProps) => {
  return (
    <View>
      <TabBar
        type='radio'
        tabs={props.lampTabs}
        style={{ borderRadius: cx(8), backgroundColor: props.theme?.segment.background, height: cx(40), marginHorizontal: cx(16) }}
        tabTextStyle={{ color: props.theme?.segment.fontColor }}
        tabActiveTextStyle={{ color: props.theme?.segment.fontColor, fontWeight: 'bold' }}
        activeColor={props.theme?.segment.active}
        activeKey={props.activeKey}
        onChange={props.onActiveKeyChange}
      />
      {
        props.activeKey === 1 &&
          <>
              <Spacer height={cx(10)} />
              <ColorAdjustView
                  h={props.h}
                  s={props.s}
                  v={props.v}
                  minSaturation={1}
                  reserveSV={true}
                  onHSVChange={props.onHSVChange}
                  onHSVChangeComplete={props.onHSVChangeComplete} />
              <Spacer />
          </>
      }
      {
        props.activeKey === 0 &&
          <>
              <Spacer height={cx(10)} />
              <ColorTempAdjustView
                  minBrightness={1}
                  isSupportTemperature={props.isSupportTemperature}
                  isSupportBrightness={props.isSupportBrightness}
                  colorTemp={props.colorTemp}
                  brightness={props.brightness}
                  onCCTChange={props.onCCTChange}
                  onCCTChangeComplete={props.onCCTChangeComplete}
                  onBrightnessChange={props.onBrightnessChange}
                  onBrightnessChangeComplete={props.onBrightnessChangeComplete} />
              <Spacer />
          </>
      }
      {
        props.activeKey === 3 &&
          <FlatList
              numColumns={6}
              style={{
                marginHorizontal: cx(16),
              }}
              data={ColorList}
              renderItem={({ item, index }) => {
                return (
                  <TouchableOpacity
                    onPress={() => {
                      props.onColorDiskChange && props.onColorDiskChange(item, index)
                    }}
                    style={{
                      width: '16.66%', alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                    <ColorDisk
                      radius={cx(20)}
                      colors={item}
                    />
                    {props.colorDiskActiveKey === index && <View style={{ width: cx(44), height: cx(44), borderRadius: cx(44), borderColor: props.theme?.button.primary, borderWidth: cx(2), alignItems: 'center', justifyContent: 'center', position: 'absolute' }}>
                        <Image source={{ uri: res.ic_check }} style={{ width: cx(40), height: cx(40), tintColor: props.theme?.button.fontColor }} />
                    </View>}
                  </TouchableOpacity>
                )
              }}
              ListHeaderComponent={() => <Spacer height={cx(10)} />}
              ItemSeparatorComponent={() => <Spacer height={cx(10)} />}
              ListFooterComponent={() => <Spacer height={cx(10)} />}
              keyExtractor={(_, idx) => idx.toString()}
          />
      }
    </View>
  )
}

export default withTheme(StripAdjustView)

export const ColorList = [
  ['#F4A4BF', '#F65997','#F5075A','#F52071'],
  ['#E393FE','#E294FE','#94E3FC','#A7C5FF'],
  ['#2661FC', '#4D21B2','#F5085A','#FDFB42'],
  ['#F66252','#F9B241', '#41C6FC','#E5EF66'],
  ['#CBF0FF','#94E3FC','#41C6FC','#52D6FB'],
  ['#76BC41','#95D35F','#F1F6B6','#B2DD8D'],
  ['#76BC41','#D9EC39','#F66B05','#F9AB03'],
  ['#F54019','#F66B05','#76BC41','#F9AA04'],
  ['#4D21B2','#2661FC','#FDF76C','#BD39F4'],
  ['#B18DFD','#8550FB','#4D21B2','#5E30E9'],
  ['#F9AB03','#F9B241','#FCD9A7','#FAC678'],
  ['#F9AC02','#41C6FC','#F54019','#5E30E9'],
  ['#B2DD8D','#52D6FB','#8550FB','#41C6FC'],
  ['#9A2ABD','#F65997','#F5085A','#F66B05','#FDFB42'],
  ['#4D21B2','#5E30E9','#8550FB','#B18DFD','#D9C9FF'],
  ['#F77370','#F65250','#F53B3C','#F52929','#F50204'],
  ['#2660FC','#76A7FE','#FAC678','#F9AB03','#F66B05'],
  ['#E294FE','#FDF76C','#95D35F','#52D6FB','#B18DFD'],
  ['#3B88FD','#5E30E9','#F50821','#F66B05','#F9AB03'],
  ['#76BC41','#95D35F','#B2DD8D','#D9EC39','#E8F291'],
  ['#52D6FB','#F9B241','#F66B05','#D356FC','#9A2ABD'],
  ['#F9AEC7','#F88ABA','#F65590','#F65C79','#F64A49', '#F50803'],
]
