import { loadFontsAsync, once, on, emit, showUI } from '@create-figma-plugin/utilities'

import { RunAppHandler, FirstNodeHandler, SelectTextNodeHandler } from './types'

export default function () {
  on<RunAppHandler>('RUN_APP', async function () {
    if (figma.currentPage.selection.length === 0) {
      console.log("No selection");
      figma.notify("Select a frame(s) to get started", { timeout: 2000 });
      return;
    } else {
      let nodes = figma.currentPage.selection;
      let firstNode = [];

      firstNode.push(figma.currentPage.selection[0]);

      const errors = lint(firstNode);

      emit<FirstNodeHandler>('FIRST_NODE', errors);

    }
  })
  on<SelectTextNodeHandler>('SELECT_TEXT_NODE', async function (node: TextNode) {
    figma.currentPage.selection = [node]
    figma.viewport.scrollAndZoomIntoView([node])
  })
  showUI({ height: 400, width: 320 })
}

function lint(nodes: any) {
  let errorArray: any = [];
  let childArray: any = [];

  nodes.forEach((node: any) => {

    // Create a new object.
    let newObject: any = {};

    // Give it the existing node id.
    newObject["id"] = node.id;

    let children = node.children;

    newObject["errors"] = determineType(node);

    if (!children) {
      errorArray.push(newObject);
      return;
    } else if (children) {
      // Recursively run this function to flatten out children and grandchildren nodes
      node["children"].forEach((childNode: any) => {
        childArray.push(childNode.id);
      });

      newObject["children"] = childArray;

      // If the layer is locked, pass the optional parameter to the recursive Lint
      // function to indicate this layer is locked.
      errorArray.push(...lint(node["children"]));
    }

    errorArray.push(newObject);
  });

  return errorArray;
}

function determineType(node: any) {
  if (node.type === "TEXT") {
    return lintTextRules(node);
  }
}


function lintTextRules(node: any) {
  let errors: any[] = [];
  checkType(node, errors);
  return errors;
}

function checkType(node: any, errors: any) {
  if (node.textStyleId === "" && node.visible === true) {
    let textObject = {
      font: "",
      fontStyle: "",
      fontSize: "",
      lineHeight: {}
    };

    let fontStyle = node.fontName;
    let fontSize = node.fontName;

    if (typeof fontSize === "symbol") {
      return errors.push(
        createErrorObject(
          node,
          "text",
          "Missing text style",
          "Mixed sizes or families"
        )
      );
    }

    if (typeof fontStyle === "symbol") {
      return errors.push(
        createErrorObject(
          node,
          "text",
          "Missing text style",
          "Mixed sizes or families"
        )
      );
    }

    textObject.font = node.fontName.family;
    textObject.fontStyle = node.fontName.style;
    textObject.fontSize = node.fontSize;

    // Line height can be "auto" or a pixel value
    if (node.lineHeight.value !== undefined) {
      textObject.lineHeight = node.lineHeight.value;
    } else {
      textObject.lineHeight = "Auto";
    }

    let currentStyle = `${textObject.font} ${textObject.fontStyle} / ${textObject.fontSize} (${textObject.lineHeight} line-height)`;

    return errors.push(
      createErrorObject(node, "text", "Missing text style", currentStyle)
    );
  } else {
    return;
  }
}

function createErrorObject(node: any, type: any, message: any, value?: any) {
  let error = {
    message: "",
    type: "",
    node: "",
    value: ""
  };

  error.message = message;
  error.type = type;
  error.node = node;

  if (value !== undefined) {
    error.value = value;
  }

  return error;
}

import { EventHandler } from '@create-figma-plugin/utilities'

export interface RunAppHandler extends EventHandler {
  name: 'RUN_APP'
  handler: () => void
}

export interface FirstNodeHandler extends EventHandler {
  name: 'FIRST_NODE'
  handler: (node: any) => void
}

export interface SelectTextNodeHandler extends EventHandler {
  name: 'SELECT_TEXT_NODE'
  handler: (node: TextNode) => void
}

import {
  Button,
  Container,
  render,
  VerticalSpace,
  Text,
  Banner,
  IconInfo32,
} from '@create-figma-plugin/ui'
import { emit, on } from '@create-figma-plugin/utilities'
import { h } from 'preact'
import { useCallback, useState } from 'preact/hooks'

import styles from './styles.css'
import { FirstNodeHandler, RunAppHandler, SelectTextNodeHandler } from './types'

function Plugin() {
  const [firstNodeArray, setFirstNodeArray] = useState<SceneNode[] | null>([])
  const [isSelected, setIsSelected] = useState<boolean>(false)
  const handleRunAppButtonClick = useCallback(
    function () {
      emit<RunAppHandler>('RUN_APP')
    },
    []
  )
  const handleSelectTextNodeButtonClick = (node: TextNode) => emit<SelectTextNodeHandler>('SELECT_TEXT_NODE', node)

  on<FirstNodeHandler>('FIRST_NODE', function (nodeArray: SceneNode[]) {
    // Reduce the size of our array of errors by removing nodes with no errors on them.
    let filteredErrorArray = nodeArray.filter(
      (item: any) => item.errors !== undefined && item.errors.length >= 1
    );

    setIsSelected(nodeArray.length > 0)
    setFirstNodeArray(filteredErrorArray)
  })

  return (
    <Container space="medium">
      <VerticalSpace space="small" />
      <div class={styles.container}>
        {
          firstNodeArray && firstNodeArray.length > 0 ?
            firstNodeArray.map((item: any, index) => {
              console.log("item", item);
              return (
                <Banner variant="warning" icon={<IconInfo32 />} style={{ "margin-bottom": "10px" }}>
                  <Text style={{ "margin-bottom": "10px", "color": "black" }}>{`${index + 1}. テキストスタイルが適用されていません`}</Text>
                  <Text style={{ "margin-bottom": "10px", "color": "black" }}>{item.errors[0].value}</Text>
                  <Button danger onClick={() => {
                    handleSelectTextNodeButtonClick(item)
                  }}>選択する</Button>
                </Banner>
              )
            })
            : (
              isSelected ? (<Text>テキストスタイルの適用漏れはありません</Text>) : (<Text>フレームを選択して下さい</Text>)
            )
        }
      </div>
      <VerticalSpace space="large" />
      <Button fullWidth onClick={handleRunAppButtonClick}>
        テキストスタイルの適用漏れを検出する
      </Button>
      <VerticalSpace space="small" />
    </Container>
  )
}

export default render(Plugin)