import React from 'react';
import { DpBooleanAction, DpCommonAction } from '@ray-js/panel-sdk';
import { useSdmProps } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
import styles from '../../pages/home/index.module.less';
import { Image, View, Text } from '@ray-js/components';
import horizontalOff from '../../../public/icon-horizontal-off.png';
import horizontalOn from '../../../public/icon-horizontal-on.png';
import verticalOn from '../../../public/icon-vertical-on.png';
import verticalOff from '../../../public/icon-vertical-off.png';

export const FanVertical = React.memo(() => {
  const fanHorizontalCode = 'fan_horizontal';
  const fanVerticalCode = 'fan_vertical';
  const fanVerticalSwitchCode = 'switch_vertical';
  const fanHorizontalSwitchCode = 'switch_horizontal';

  const fanHorizontalVal = useSdmProps(props => props[fanHorizontalCode]);
  const fanVerticalVal = useSdmProps(props => props[fanVerticalCode]);
  const fanHorizontalSwitch = useSdmProps(props => props[fanHorizontalSwitchCode]);
  const fanVerticalSwitch = useSdmProps(props => props[fanVerticalSwitchCode]);

  const device = devices.fan;
  const actions = device.model.actions;

  const fanHorizontalAction = actions[fanHorizontalCode] as DpCommonAction<string>;
  const fanVerticalAction = actions[fanVerticalCode] as DpCommonAction<string>;
  const fanHorizontalSwitchAction = actions[fanHorizontalSwitchCode] as DpBooleanAction;
  const fanVerticalSwitchAction = actions[fanVerticalSwitchCode] as DpBooleanAction;

  const verticalMenu = [
    {
      title: 'Vertical',
      icon: verticalOn,
      offIcon: verticalOff,
      mode: 'vertical',
      value: fanVerticalVal,
    },
    {
      title: 'Horizontal',
      icon: horizontalOn,
      offIcon: horizontalOff,
      mode: 'horizontal',
      value: fanHorizontalVal,
    },
  ];

  function handleVerticalMenu(index) {
    if (index == 0) {
      // if (!fanVerticalSwitch) {
      //   fanVerticalAction.set(String(90))
      //   fanVerticalSwitchAction.on()
      // } else {
      //   fanVerticalSwitchAction.off()

      // }
      fanVerticalSwitchAction.toggle();
    } else {
      //   if (!fanHorizontalSwitch) {
      //     fanHorizontalAction.set(String(90))
      //     fanHorizontalSwitchAction.on()
      //  }else {
      //   fanHorizontalSwitchAction.off()
      //  }
      fanHorizontalSwitchAction.toggle();
    }
  }

  function submenuItem(index, arr = verticalMenu, clickFun = handleVerticalMenu) {
    const isOn = index == 0 ? fanVerticalSwitch : fanHorizontalSwitch;
    const { title, icon, offIcon } = arr[index];
    return (
      <View className={styles.button}>
        <Image
          className={styles.menuImage}
          src={isOn ? icon : offIcon}
          onClick={() => {
            clickFun(index);
          }}
        />
        <Text className={styles.bTitle}>{title}</Text>
      </View>
    );
  }

  const clickNum = (val, index) => {
    console.log(val, index, 'clickNummmm');
    if (index == 0 && fanVerticalSwitch) {
      fanVerticalAction.set(String(val));
    } else if (index == 1 && fanHorizontalSwitch) {
      fanHorizontalAction.set(String(val));
    }
  };

  function verticalItem(index) {
    const item = verticalMenu[index];
    const isBlack = (index == 0 && fanVerticalSwitch) || (index == 1 && fanHorizontalSwitch);
    const textColor = subIndex => {
      return {
        color: isBlack && Number(item.value) == subIndex * 30 ? '#000000' : 'rgba(0,0,0,0.4)',
        width: '33.3%',
        textAlign: 'center',
        lineHeight: '64px',
        fontWeight: '500',
      };
    };

    return (
      <View className={styles.verticalItem}>
        {submenuItem(index, verticalMenu, handleVerticalMenu)}
        <View className={styles.verticalNumBg}>
          <View
            style={textColor(1)}
            onClick={() => {
              clickNum(30, index);
            }}
          >
            30
          </View>
          <View
            style={textColor(2)}
            onClick={() => {
              clickNum(60, index);
            }}
          >
            60
          </View>
          <View
            style={textColor(3)}
            onClick={() => {
              clickNum(90, index);
            }}
          >
            90
          </View>
        </View>
      </View>
    );
  }
  return (
    <View>
      {verticalItem(0)}
      {verticalItem(1)}
    </View>
  );
});