import {
  Panel,
  Group,
  scroller,
  vlayout,
  layoutConfig,
  LayoutSpec,
  Input,
  Gravity,
  log,
  Color,
  input,
  text,
  InputType,
} from "doric";
import { title, colors } from "./utils";

function getInput(c: Partial<Input>) {
  const inputView = input(c);
  const isFocused = text({
    layoutConfig: {
      widthSpec: LayoutSpec.MOST,
      heightSpec: LayoutSpec.JUST,
    },
    height: 50,
  });
  const inputed = text({
    layoutConfig: {
      widthSpec: LayoutSpec.MOST,
      heightSpec: LayoutSpec.JUST,
    },
    height: 50,
  });
  inputView.onFocusChange = (onFocusChange) => {
    isFocused.text = onFocusChange ? `Focused` : `Unfocused`;
  };
  inputView.onTextChange = (text) => {
    inputed.text = `Inputed:${text}`;
  };
  return [inputView, isFocused, inputed];
}

@Entry
class InputDemo extends Panel {
  build(root: Group) {
    var [inputView, ...otherView] = getInput({
      layoutConfig: {
        widthSpec: LayoutSpec.FIT,
        heightSpec: LayoutSpec.FIT,
      },
      hintText: "Please input something in one line",
      border: {
        width: 1,
        color: Color.GRAY,
      },
      multiline: false,
      textSize: 20,
      maxLength: 20,
      padding: { top: 10, bottom: 11 },
      inputType: InputType.Decimal,
      password: true,
    });
    scroller(
      vlayout(
        [
          title("Demo"),
          // ...getInput({
          //     layoutConfig: {
          //         widthSpec: LayoutSpec.JUST,
          //         heightSpec: LayoutSpec.FIT,
          //     },
          //     width: 300,
          //     hintText: "Please input something",
          //     border: {
          //         width: 1,
          //         color: Color.GRAY,
          //     },
          //     textSize: 40,
          //     maxLength: 20,
          // }),
          inputView,
          ...otherView,
        ],
        {
          space: 10,
          layoutConfig: layoutConfig().most().configHeight(LayoutSpec.MOST),
          onClick: () => {
            (inputView as Input).releaseFocus(context);
          },
        }
      ),
      {
        layoutConfig: layoutConfig().most(),
      }
    ).in(root);
  }
}
