instance.renderStyle({
  color: "red",
  fontSize: "12px",
});
// → "css-abc"

import * as S from 'parser-ts/string'
import * as P from 'parser-ts/Parser'
import * as C from 'parser-ts/char'
import { run } from 'parser-ts/code-frame'
import { apply, pipe } from 'fp-ts/function'

import { map, foldMap } from 'fp-ts/Array'
import { match } from 'ts-pattern'
import _ from 'lodash'
import shell from 'shelljs'
const { ShellString } = shell
import jsonFormat from 'json-format'
const config_jsonFormat = {
  type: 'space',
  size: 2,
}

const styp = `<StylePatch>
  <span>
    {{
      backgroundColor: '#1a1a1a',
      borderRadius: '2px',
      color: 'white',
      display: 'inline-block',
      fontSize: '0.8rem',
      padding: '0.4rem 0.5rem',
      position: 'relative',
      __after: {
        borderColor: '#1a1a1a transparent transparent transparent',
        borderStyle: 'solid',
        borderWidth: '3px 3px 0 3px',
        bottom: '0',
        content: '',
        display: 'block',
        height: '0',
        left: '50%',
        position: 'absolute',
        transform: 'translate(-50%, 100%)',
        width: '0',
      },
    }}
  </span>
</StylePatch>
`.replaceAll(/[\r\n\t]/g, '')

interface AstNode extends Record<string, string> {
  readonly kind:
    | 'OPEN_componentTag'
    | 'OPEN_htmlTag'
    | 'CLOSE_tag'
    | 'CSS_property'
    | 'CSS_value'
    | 'START_css'
    | 'END_css'
    | 'BEGIN_nesting'
    | 'END_nesting'
    | 'BEGIN_stypFile'
    | 'END_stypFile'
    | 'empty'
  readonly value: string
}

type Ast = Array<AstNode>

const spaceTrim = P.surroundedBy(S.spaces)

const startFile: P.Parser<string, AstNode> = pipe(
  S.string('<StylePatch>'),
  P.map(value => ({
    kind: 'BEGIN_stypFile',
    value: value.slice(1, -1),
  }))
)

const endFile: P.Parser<string, AstNode> = pipe(
  S.string('</StylePatch>'),
  P.map(value => ({
    kind: 'END_stypFile',
    value: value.slice(2, -1),
  }))
)

const openingComponentTag: P.Parser<string, AstNode> = pipe(
  P.manyTill(
    pipe(
      C.char('<'),
      P.alt(() => C.letter)
    ),
    C.char('>')
  ),
  P.map(value => {
    return {
      kind: 'OPEN_componentTag',
      value: value.slice(1).join(''),
    }
  })
)

const openingHtmlTag: P.Parser<string, AstNode> = pipe(
  P.manyTill(
    pipe(
      C.char('<'),
      P.alt(() => C.lower)
    ),
    C.char('>')
  ),
  P.map(value => {
    return {
      kind: 'OPEN_htmlTag',
      value: value.slice(1).join(''),
    }
  })
)

const closingTag: P.Parser<string, AstNode> = pipe(
  P.manyTill(
    pipe(
      S.string('</'),
      P.alt(() => C.letter)
    ),
    C.char('>')
  ),
  P.map(value => ({
    kind: 'CLOSE_tag',
    value: value.slice(1).join(''),
  }))
)

const cssProperty: P.Parser<string, AstNode> = pipe(
  P.manyTill(
    pipe(
      C.letter,
      P.alt(() => C.oneOf(["'", '_'].join('')))
    ),
    C.char(':')
  ),
  P.map(value => ({
    kind: 'CSS_property',
    value: value.join(''),
  }))
)

const cssPropertyValue: P.Parser<string, AstNode> = pipe(
  P.manyTill(
    pipe(
      C.alphanum,
      P.alt(() =>
        C.oneOf(
          ["'", '"', ':', '#', '.', '-', '%', ' ', '(', ')', ','].join('')
        )
      )
    ),
    S.string("',")
  ),
  P.map(value => ({
    kind: 'CSS_value',
    value: value.join('').replaceAll(/\'/g, ''),
  }))
)

const startStylePatch: P.Parser<string, AstNode> = pipe(
  S.string('{{'),
  P.map(value => ({
    kind: 'START_css',
    value: value,
  }))
)

const endStylePatch: P.Parser<string, AstNode> = pipe(
  S.string('}}'),
  P.map(value => ({
    kind: 'END_css',
    value: value,
  }))
)

const startNestCss: P.Parser<string, AstNode> = pipe(
  S.string('{'),
  P.map(value => ({
    kind: 'BEGIN_nesting',
    value: value,
  }))
)

const endNestCss: P.Parser<string, AstNode> = pipe(
  S.string('},'),
  P.alt(() => C.char('}')),
  P.map(value => ({
    kind: 'END_nesting',
    value: value.replaceAll(',', ''),
  }))
)

const parser: P.Parser<string, AstNode> = pipe(
  startFile,
  P.alt(() => spaceTrim(endFile)),
  P.alt(() => spaceTrim(openingHtmlTag)),
  P.alt(() => spaceTrim(openingComponentTag)),
  P.alt(() => spaceTrim(closingTag)),
  P.alt(() => spaceTrim(cssProperty)),
  P.alt(() => spaceTrim(cssPropertyValue)),
  P.alt(() => spaceTrim(startStylePatch)),
  P.alt(() => spaceTrim(endStylePatch)),
  P.alt(() => spaceTrim(startNestCss)),
  P.alt(() => spaceTrim(endNestCss)),
  P.map(value => {
    return value
  })
)

const result = run(P.many(parser), styp)

const ast = result._tag === 'Right' ? result.right : []

import * as Ar from 'fp-ts/Array'

import { last } from 'fp-ts/Semigroup'
import { Foldable, zip } from 'fp-ts/Array'
import { identity } from 'fp-ts/function'
import { fromFoldableMap } from 'fp-ts/Record'

import * as Rec from 'fp-ts/Record'
import { Magma } from 'fp-ts/Magma'

const m2: Magma<string> = { concat: (x: string) => x }

type AstNodeAddID = {
  id: string
  forest?: Array<TREE.Tree<unknown>>
} & AstNode

const syntaxRecords: Array<Record<string, string>> = pipe(
  ast,
  Ar.mapWithIndex((i: number, record: Record<string, string>) =>
    Rec.union(m2)(record)({ id: `${i}` })
  )
)

const parseAreaSyntaxRecord = pipe(
  syntaxRecords,
  Ar.dropRight(1),
  Ar.dropLeft(1)
) as Array<AstNodeAddID>

import * as TREE from 'fp-ts/Tree'
import * as ARRAY from 'fp-ts/Array'
import * as E from 'fp-ts/Either'
import * as STATE from 'fp-ts/State'

const zipObject =
  <K extends string, A>(keys: Array<K>) =>
  (values: Array<A>): Record<K, A> =>
    fromFoldableMap(last<A>(), Foldable)(zip(keys, values), identity)

type BuildStatus = E.Either<
  TREE.Forest<AstNodeAddID> | never,
  TREE.Forest<AstNodeAddID> | never
>

type AstTree = STATE.State<
  BuildStatus,
  TREE.Tree<{ readonly value: AstNodeAddID } | AstNodeAddID>
>

const castTree = pipe(
  parseAreaSyntaxRecord,
  ARRAY.map(r => zipObject(['value', 'forest'])([r, []]))
) as TREE.Forest<AstNodeAddID>

const isolateTarget = (records: TREE.Forest<AstNodeAddID>) => {
  const [[{ value }], forest] = pipe(records, ARRAY.splitAt(1))
  const test = TREE.fold(
    (root: AstNodeAddID, forest: TREE.Forest<AstNodeAddID>) =>
      TREE.make(root, forest)
  )
  const res = test({
    value: value,
    forest: forest,
  })
  return res
}

import * as NUMBER from 'fp-ts/number'

const matchAnyOne = (s: string) => (ary: Array<string>) => {
  const matchCount = pipe(
    ary,
    ARRAY.filter((item: string) => s === item),
    ARRAY.size
  )
  return !NUMBER.Eq.equals(matchCount, 0)
}

const nestStartKeywords = ['OPEN_htmlTag', 'START_css', 'BEGIN_nesting']

// prettier-ignore
const matchController = 
  (forest: TREE.Forest<AstNodeAddID>): AstTree => {
    const { kind, id } = forest[0].value
    return pipe(
      kind,
      E.fromPredicate(
        kind => matchAnyOne(kind)(nestStartKeywords),
        () => {}
      ),
      E.match(
        () => ((_s: BuildStatus) => [TREE.bindTo('value')(forest[0]), E.left(forest.slice(1))]),
        () => {
          const nextTarget = pipe(
            forest,
            isolateTarget,
          )
          //console.log(currTree)
          return (_s: BuildStatus) => [TREE.bindTo('value')(nextTarget), E.right(nextTarget.forest)]
        }
      )
    )
  }

const astBuildController = (state: AstTree): AstTree => {
  const [currTree, status] = state(E.right(castTree))
  return pipe(
    status,
    E.match(
      () => state,
      prevForest => {
        return pipe(prevForest, matchController, astBuildController)
      }
    )
  )
}

//const [t1, t2] = STATE.traverseArray(matchController)([E.right(castTree)])

const [output, finalStatus] = astBuildController(() => [
  castTree[0],
  E.right(castTree.slice(1)),
])(E.right(castTree))

const test = parseAreaSyntaxRecord

console.log(test)
//
console.log(jsonFormat(test, config_jsonFormat))

new ShellString(jsonFormat(test, config_jsonFormat)).to('tmp/buildinfTree.json')

// prettier-ignore
const css = pipe(
  ast as Ast,
  map(({ kind, value }: AstNode) => {
    return match(kind)
      .with('BEGIN_stypFile', () => '')
      .with('END_stypFile', () => '')
      .with('OPEN_componentTag', () => value + '{')
      .with('OPEN_htmlTag', () => value + '{')
      .with('CLOSE_tag', () => '}')
      .with('CSS_property', () => value + ':')
      .with('CSS_value', () => `"${value}"` + ';')
      .with('START_css', () => '')
      .with('END_css', () => '')
      .with('BEGIN_nesting', () => value)
      .with('END_nesting', () => value)
      .exhaustive
    }
  ),
  foldMap({ concat: (a: string, b: string) => a + b, empty: '' })((s: string) => s)
)

const normalizedCss = css
  .replaceAll('_at_', '@')
  .replaceAll('__', '&::')
  .replaceAll('_', '&:')

new ShellString(normalizedCss).to('tmp/pseudoCSS.scss')

const parse =
  (stopKeyword: string) =>
  (buffer: Buffer): ParseResult => {
    let prevChar: Array<C.Char> = Array(stopKeyword.length)
    return pipe(
      buffer,
      STREAM.stream,
      P.takeUntil((c: C.Char) => {
        prevChar.push(c)
        //console.log(prevChar)
        return prevChar.join('') === stopKeyword
      }),
      EITHER.match(
        () => ({
          rest: buffer,
          found: '',
        }),
        obj => {
          const [stop, ...rest] = ARRAY.dropLeft(obj.next.cursor)(buffer)
          const findString = obj.value.join('') + stop
          return {
            rest: ARRAY.dropLeftWhile((c: C.Char) => c === ' ')(rest),
            found: findString,
          }
        }
      )
    )
  }

const finder = {
  beginFile: parse('<StylePatch>'),
  endFile: parse('</StylePatch>'),
  tagStart: parse('<'),
  tagEnd: parse('>'),
  beginCss: parse('{'),
  endCss: parse('}'),
  endProperty: parse(':'),
  endValue: parse(','),
}

let tokensArray: Array<string> = []

const nextParse = (rest: Buffer) => {
  return (
    match(_.first(rest))
      .with('<', () => parse('>')(rest))
      //.with('{', () => parse('{')(rest))
      //.with("'", () => finder.endValue(rest))
      .otherwise(() => parse('}}')(rest))
  )
}

const saveContinued = (buffer: Buffer): Buffer => {
  const { rest, found } = nextParse(buffer)
  //console.log(_.first(rest), found)
  tokensArray.push(found)
  return _.isEmpty(rest) ? [] : saveContinued(rest)
}

pipe([...rawStyp], finder.beginFile, obj => obj.rest, saveContinued)

console.log(tokensArray, '\n')

import * as STORE from 'fp-ts/Store'
import * as STATE from 'fp-ts/State'
import * as TRACED from 'fp-ts/Traced'

interface Token {
  type: string
  value: string
}

interface Parser {
  // 現在の位置のトークンを取得
  readonly peek: (pos: number) => Token
  // 現在どこまで読んだか
  readonly pos: number
}

const tokenSequenceParser: Parser = {
  peek: (pos: number) => tokenSequence[pos],
  pos: 0,
}

const ast = []

const astNodeBuilder = {
  tag: () => {
    /**
      map: <A, B>(f: (a: A) => B) => <E>(fa: State<E, A>) => State<E, B>
     */
    const pushTokenStack = (tokens: string[]) =>
      tokens.push(tokenSequenceParser.peek(tokenSequenceParser.pos).value)
    const judgeFinish = (isFinished: boolean) => {
      if (isFinished) {
        return [pushTokenStack, isFinished]
      } else {
        return [pushTokenStack, isFinished]
      }
    }
    const stack = STATE.map(pushTokenStack)
    console.log(stack)
  },
}

const pushTokenStack = (tokens: string[]) => {
  tokens.push(tokenSequenceParser.peek(tokenSequenceParser.pos).value)
  return tokens
}
const judgeFinish = (isFinished: boolean) => {
  if (!isFinished) {
    STORE.seeks((pos: number) => pos + 1)(tokenSequenceParser)
    STATE.map(pushTokenStack)(STATE.get())
    console.log(STATE.map(pushTokenStack)(STATE.get())([]))
  }
  return [[], isFinished] as [string[], boolean]
}

const stack = STATE.map(pushTokenStack)
console.log(stack(judgeFinish)(false))

const tokenMatcher = (token: Token, _cursor: number) => {
  return match(token).with({ value: '<', type: 'JSXPunctuator' }, () =>
    astNodeBuilder.tag()
  )
}

const res = tokenSequence.map((token, _cursor) => tokenMatcher(token, _cursor))

//console.log(res)