import Roact, { createRef } from '@rbxts/roact';
import Hooks from '@rbxts/roact-hooks';
import * as UiUtility from '../../UiUtility';
import { TouchLayoutProps } from './TouchLayout';


export interface KeyboardLayoutProps extends DefaultProps, Pick<TouchLayoutProps, 'text' | 'onActivated' | 'visible'> {
}

interface DefaultProps {
  /** 键盘的按键 */
  key?: string;
}

const Padding = [6, 3];
/** 键盘设备的UI布局 */
const KeyboardLayout: Hooks.FC<KeyboardLayoutProps & Required<DefaultProps>> = (props, { useState, useValue, useMemo, useEffect }) => {
  const frameRef = createRef<Frame>();
  const labelRef = createRef<TextLabel>();
  const scaleRef = createRef<UIScale>();
  const keySize = new UDim2(0, 18, 0, 18);
  const keyPosition = new UDim2(0, Padding[0], 0.5, -keySize.X.Offset / 2);
  const labelPosition = new UDim2(0, keyPosition.X.Offset + keySize.X.Offset + Padding[0] / 2, 0.5, 0);

  useEffect(() => {
    const frameRefCurrent = frameRef.getValue();
    const labelRefCurrent = labelRef.getValue();
    const scaleRefCurrent = scaleRef.getValue();

    if (frameRefCurrent && labelRefCurrent) {
      frameRefCurrent.Size = new UDim2(0, labelPosition.X.Offset + labelRefCurrent.TextBounds.X + Padding[0] / 1.5, 0, keySize.Y.Offset + Padding[1] * 2);
      frameRefCurrent.Position = new UDim2(0.5, -frameRefCurrent.Size.X.Offset / 2, 0.2, -frameRefCurrent.Size.Y.Offset);
    }
    if (scaleRefCurrent) {
      scaleRefCurrent.Scale = UiUtility.getScale();
    }
  }, [props.text]);

  return (
    <frame 
      Ref={frameRef}
      Key="InteractiveKeyboardLayout"
      BackgroundColor3={UiUtility.getPrimaryColor()}
      BackgroundTransparency={0.5}
      BorderSizePixel={0}
      Visible={props.visible}
    >
      <uiscale Ref={scaleRef} Key="Scale" />
      <uicorner Key="Corner" CornerRadius={new UDim(0, 2)} />
      {/* KeyNode */}
      <textlabel
        {...UiUtility.setFont(props.key, 14)}
        Key="Key"
        Size={keySize}
        Position={keyPosition}
        BackgroundColor3={Color3.fromRGB(255, 255, 255)}
        TextScaled={true}
      >
        <uicorner CornerRadius={new UDim(0, 4)} />
      </textlabel>
      {/* LabelNode */}
      <textlabel
        {...UiUtility.setFont(props.text, 14)}
        Key="Label"
        Ref={labelRef}
        TextColor3={Color3.fromRGB(255, 255, 255)}
        Position={new UDim2(0, keyPosition.X.Offset + keySize.X.Offset + Padding[0] / 2, 0.5, 0)}
        BorderSizePixel={0}
        TextXAlignment="Left"
        LineHeight={1.05}
      />
    </frame>
  );
};

export default new Hooks(Roact)(KeyboardLayout, {
  defaultProps: {
    key: 'F',
    text: '',
    visible: false
  }
});