import { ASTViewer } from '@/src/components/ASTViewer'
import { GeneratedCss } from '@/src/components/GeneratedCss'
import { useBamboo } from '@/src/hooks/useBamboo'
import { css, cva, cx } from '@/styled-system/css'
import { flex } from '@/styled-system/patterns'
import { segmentGroup } from '@/styled-system/recipes'
import { SegmentGroup } from '@ark-ui/react/segment-group'
import { Splitter } from '@ark-ui/react/splitter'
import * as React from 'react'
import { ChevronUpIcon } from './icons'

type ArtifactsPanelType = {
  bamboo: ReturnType<typeof useBamboo>
}

const tabs = [
  {
    id: 'ast',
    label: 'AST',
  },
  {
    id: 'generated',
    label: 'CSS',
  },
]

export const ArtifactsPanel = React.memo(function ArtifactsPanel(props: ArtifactsPanelType) {
  const [open, setOpen] = React.useState(false)
  const [activeTab, setActiveTab] = React.useState<'ast' | 'generated'>('ast')

  function handleClick() {
    setOpen((s) => !s)
  }

  return (
    <>
      <Splitter.ResizeTrigger id="editor:artifacts" asChild hidden={!open}>
        <div />
      </Splitter.ResizeTrigger>
      <Splitter.Panel id="artifacts" className={artifactsPanel({ open })}>
        <div
          className={flex({
            w: 'full',
            h: '12',
            cursor: 'pointer',
            px: '6',
            py: '2',
            align: 'center',
            justify: 'space-between',
            borderBottomWidth: '1px',
            zIndex: 2,
          })}
          onClick={handleClick}
        >
          <SegmentGroup.Root
            data-expanded={open ? '' : undefined}
            className={cx(segmentGroup(), 'group')}
            value={activeTab}
            onClick={(e) => {
              if (open) e.stopPropagation()
            }}
            onValueChange={(e) => setActiveTab(e.value as any)}
          >
            <SegmentGroup.Indicator
              className={css({
                background: { base: 'transparent', _groupExpanded: 'primary' },
                width: 'var(--width)',
                height: 'var(--height)',
                top: 'var(--top)',
                left: 'var(--left)',
              })}
            />
            {tabs.map((option, id) => (
              <SegmentGroup.Item
                key={id}
                value={option.id}
                data-expanded={open ? '' : undefined}
                className={css({
                  '&:not([data-expanded])': {
                    bg: { base: 'gray.100', _dark: '#1d1e1fc4' },
                    shadow: 'sm',
                    rounded: 'md',
                  },
                })}
              >
                <SegmentGroup.ItemText
                  className={css({
                    px: '2',
                    _checked: {
                      color: {
                        base: { base: 'inherit', _hover: 'text.default' },
                        _groupExpanded: 'black',
                      },
                    },
                  })}
                >
                  {option.label}
                </SegmentGroup.ItemText>
                <SegmentGroup.ItemControl />
                <SegmentGroup.ItemHiddenInput />
              </SegmentGroup.Item>
            ))}
          </SegmentGroup.Root>
          <span
            className={css({
              expanded: open ? '' : undefined,
              transform: { _expanded: 'rotate(180deg)' },
              transition: 'all .2s ease',
              color: { _expanded: { _dark: 'primary' } },
            })}
          >
            <ChevronUpIcon />
          </span>
        </div>
        {activeTab === 'ast' && <ASTViewer parserResult={props.bamboo.parserResult} />}
        {/* Using visible cause it's better to let the monaco editor be loaded with the others */}
        <GeneratedCss cssArtifacts={props.bamboo.cssArtifacts} visible={activeTab === 'generated' && open} />
      </Splitter.Panel>
    </>
  )
})

const artifactsPanel = cva({
  base: {
    flexDir: 'column',
    minH: '12',
    background: { _dark: '#262626' },
    zIndex: '3',
  },
  variants: {
    open: {
      false: {
        maxH: '12',
        borderTopWidth: '1px',
      },
    },
  },
})
