import { useKeyPress } from "ahooks";
import React, { useEffect } from "react";
import { Popover, Button } from "antd";
import localChannelStatus from "../lib/localChannelStatus";
import { Descriptions, Typography } from "antd";
let pressedKeyAndChannel = [];

const { Text } = Typography;

export default function Keyboard({
  playAudio,
  serverConfig,
  changeChannel,
  channelList = [],
  channelStatus = {},
}) {
  const { audioList = [] } = serverConfig;
  const visibleAudioList = audioList.filter(({ type }) => type !== "text");

  // channel
  useKeyPress(
    () => true,
    ({ type: keyType, key }) => {
      console.log(key, keyType);

      // channel
      channelList.forEach((channel) => {
        const { pin, keyboard = [], type } = channel;
        keyboard.forEach((pressedKey) => {
          const { name, speed, method, autoReset } = pressedKey;
          if (name.toLocaleLowerCase() === key.toLocaleLowerCase()) {
            if (type === "switch") {
              if (keyType === "keydown") {
                const value = !channelStatus[pin];
                changeChannel({ pin, value });
                return;
              }

              if (keyType === "keyup" && autoReset) {
                changeChannel({ pin, value: 0 });
                return;
              }
            } else {
              if (method === "step") {
                if (keyType === "keydown") {
                  pressedKeyAndChannel.push({ pressedKey, channel });
                }
                if (keyType === "keyup") {
                  pressedKeyAndChannel = pressedKeyAndChannel.filter(
                    ({ pressedKey }) => pressedKey.key === key
                  );
                }
              } else {
                if (keyType === "keydown") {
                  changeChannel({ pin, value: speed });
                }
                if (keyType === "keyup" && autoReset) {
                  changeChannel({ pin, value: 0 });
                }
              }
            }
          }
        });
      });
    },
    {
      events: ["keydown", "keyup"],
    }
  );

  useKeyPress(
    () => true,
    ({ key }) => {
      visibleAudioList.forEach(({ path, keyboard = "", type }) => {
        if (keyboard.toLocaleLowerCase() === key.toLocaleLowerCase())
          switch (type) {
            case "audio":
              playAudio({ path });
              break;
            case "stop":
              playAudio({ stop: true });
              break;
            default:
              break;
          }
      });
    },
    { events: ["keydown"] }
  );

  useEffect(() => {
    console.log("changeChannel change");
    const interval = 100;
    const timerId = setInterval(() => {
      pressedKeyAndChannel.forEach(
        ({ pressedKey: { positive, speed = 0.5 }, channel: { pin } }) => {
          let value =
            (localChannelStatus[pin] || 0) +
            ((positive ? 1 : -1) * speed) / (1000 / interval);
          if (value > 1) value = 1;
          if (value < -1) value = -1;
          changeChannel({ pin, value });
        }
      );
    }, interval);
    return () => {
      clearInterval(timerId);
    };
  }, [changeChannel]);

  return (
    <Popover
      placement="topLeft"
      overlayClassName="popovertip"
      content={
        <Descriptions title="键盘" bordered>
          <Descriptions.Item label="播放声音">
            {visibleAudioList.map(({ name, keyboard = "", type }, index) => (
              <p key={`${name}-${index}`}>
                {type === "stop" ? (
                  "停止播放"
                ) : (
                  <>
                    播放 <Text code>{name}</Text>
                  </>
                )}
                :<Text keyboard>{keyboard}</Text>
              </p>
            ))}
          </Descriptions.Item>
          {channelList.map(({ pin, name, keyboard = [], type }) => (
            <Descriptions.Item
              key={pin}
              label={
                <>
                  {name} <Text code>通道:{pin}</Text>
                </>
              }
            >
              {keyboard.map(({ name: key, speed, autoReset }) => (
                <p key={key}>
                  {name}
                  <Text code>
                    {type}:{speed}
                  </Text>
                  :<Text keyboard>{key}</Text>
                  {autoReset && <Text type="secondary">释放归位</Text>}
                </p>
              ))}
            </Descriptions.Item>
          ))}
        </Descriptions>
      }
    >
      <Button shape="round">⌨️</Button>
    </Popover>
  );
}
