import React from 'react'
import Link from 'next/link'

import { useSnapshot } from 'valtio'
import { useRouter } from 'next/router'
import { FolderOpen, X, ArrowUpRight, BookOpen } from 'phosphor-react'

import Stack from './Stack'
import Logo from './Logo'
import Button from './Button'
import Flex from './Flex'
import Container from './Container'
import Box from './Box'
import ThemeChanger from './ThemeChanger'
import state from '../state'
import Heading from './Heading'
import Text from './Text'
import Spinner from './Spinner'
import truncate from '../utils/truncate'
import ButtonGroup from './ButtonGroup'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger
} from './Dialog'
import PanelBox from './PanelBox'
import { templateFileIds } from '../state/constants'
import { styled } from '../stitches.config'

const ImageWrapper = styled(Flex, {
  position: 'relative',
  mt: '$2',
  mb: '$10',
  svg: {
    // fill: "red",
    '.angle': {
      fill: '$text'
    },
    ':not(.angle)': {
      stroke: '$text'
    }
  }
})

const Navigation = () => {
  const router = useRouter()
  const snap = useSnapshot(state)
  const slug = router.query?.slug
  const gistId = Array.isArray(slug) ? slug[0] : null

  return (
    <Box
      as="nav"
      css={{
        display: 'flex',
        backgroundColor: '$mauve1',
        borderBottom: '1px solid $mauve6',
        position: 'relative',
        zIndex: 2003,
        height: '60px'
      }}
    >
      <Container
        css={{
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <Flex
          css={{
            flex: 1,
            alignItems: 'center',
            borderRight: '1px solid $colors$mauve6',
            py: '$3',
            pr: '$4'
          }}
        >
          <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
            <Box
              as="a"
              css={{
                display: 'flex',
                alignItems: 'center',
                color: '$textColor'
              }}
            >
              <Logo width="32px" height="32px" />
            </Box>
          </Link>
          <Flex
            css={{
              ml: '$5',
              flexDirection: 'column',
              gap: '1px'
            }}
          >
            {snap.loading ? (
              <Spinner />
            ) : (
              <>
                <Heading css={{ lineHeight: 1 }}>{snap.gistName || 'XRPL Hooks'}</Heading>
                <Text css={{ fontSize: '$xs', color: '$mauve10', lineHeight: 1 }}>
                  {snap.files.length > 0 ? 'Gist: ' : 'Builder'}
                  {snap.files.length > 0 && (
                    <Link
                      href={`https://gist.github.com/${snap.gistOwner || ''}/${snap.gistId || ''}`}
                      passHref
                    >
                      <Text
                        as="a"
                        target="_blank"
                        rel="noreferrer noopener"
                        css={{ color: '$mauve12' }}
                      >
                        {`${snap.gistOwner || '-'}/${truncate(snap.gistId || '')}`}
                      </Text>
                    </Link>
                  )}
                </Text>
              </>
            )}
          </Flex>
          {router.isReady && (
            <ButtonGroup css={{ marginLeft: 'auto' }}>
              <Dialog open={snap.mainModalOpen} onOpenChange={open => (state.mainModalOpen = open)}>
                <DialogTrigger asChild>
                  <Button outline>
                    <FolderOpen size="15px" />
                  </Button>
                </DialogTrigger>
                <DialogContent
                  css={{
                    display: 'flex',
                    maxWidth: '1080px',
                    width: '80vw',
                    maxHeight: '80%',
                    backgroundColor: '$mauve1 !important',
                    overflowY: 'auto',
                    background: 'black',
                    p: 0
                  }}
                >
                  <Flex
                    css={{
                      flexDirection: 'column',
                      height: '100%',
                      '@md': {
                        flexDirection: 'row',
                        height: '100%'
                      }
                    }}
                  >
                    <Flex
                      css={{
                        borderBottom: '1px solid $colors$mauve5',
                        width: '100%',
                        minWidth: '240px',
                        flexDirection: 'column',
                        p: '$7',
                        backgroundColor: '$mauve2',
                        '@md': {
                          width: '30%',
                          maxWidth: '300px',
                          borderBottom: '0px',
                          borderRight: '1px solid $colors$mauve5'
                        }
                      }}
                    >
                      <DialogTitle
                        css={{
                          textTransform: 'uppercase',
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: '$3',
                          fontSize: '$xl',
                          lineHeight: '$one',
                          fontWeight: '$bold'
                        }}
                      >
                        <Logo width="48px" height="48px" /> XRPL Hooks Builder
                      </DialogTitle>
                      <DialogDescription as="div">
                        <Text
                          css={{
                            display: 'inline-flex',
                            color: 'inherit',
                            my: '$5',
                            mb: '$7'
                          }}
                        >
                          Hooks add smart contract functionality to the XRP Ledger.
                        </Text>
                        <Flex css={{ flexDirection: 'column', gap: '$2', mt: '$2' }}>
                          <Text
                            css={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: '$3',
                              color: '$purple11',
                              '&:hover': {
                                color: '$purple12'
                              },
                              '&:focus': {
                                outline: 0
                              }
                            }}
                            as="a"
                            rel="noreferrer noopener"
                            target="_blank"
                            href="https://github.com/XRPL-Labs/xrpld-hooks"
                          >
                            <ArrowUpRight size="15px" /> Hooks Github
                          </Text>

                          <Text
                            css={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: '$3',
                              color: '$purple11',
                              '&:hover': {
                                color: '$purple12'
                              },
                              '&:focus': {
                                outline: 0
                              }
                            }}
                            as="a"
                            rel="noreferrer noopener"
                            target="_blank"
                            href="https://xrpl-hooks.readme.io/v2.0/docs"
                          >
                            <ArrowUpRight size="15px" /> Hooks documentation
                          </Text>
                          <Text
                            css={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: '$3',
                              color: '$purple11',
                              '&:hover': {
                                color: '$purple12'
                              },
                              '&:focus': {
                                outline: 0
                              }
                            }}
                            as="a"
                            rel="noreferrer noopener"
                            target="_blank"
                            href="https://xrpl.org/docs.html"
                          >
                            <ArrowUpRight size="15px" /> XRPL documentation
                          </Text>
                        </Flex>
                      </DialogDescription>
                    </Flex>

                    <Flex
                      css={{
                        display: 'grid',
                        gridTemplateColumns: '1fr',
                        gridTemplateRows: 'max-content',
                        flex: 1,
                        p: '$7',
                        pb: '$16',
                        gap: '$3',
                        alignItems: 'normal',
                        flexWrap: 'wrap',
                        backgroundColor: '$mauve1',
                        '@md': {
                          gridTemplateColumns: '1fr 1fr',
                          gridTemplateRows: 'max-content'
                        },
                        '@lg': {
                          gridTemplateColumns: '1fr 1fr 1fr',
                          gridTemplateRows: 'max-content'
                        }
                      }}
                    >
                      {Object.values(templateFileIds).map(template => (
                        <PanelBox key={template.id} as="a" href={`/develop/${template.id}`}>
                          <ImageWrapper>{template.icon()}</ImageWrapper>
                          <Heading>{template.name}</Heading>

                          <Text>{template.description}</Text>
                        </PanelBox>
                      ))}
                    </Flex>
                  </Flex>
                  <DialogClose asChild>
                    <Box
                      css={{
                        position: 'absolute',
                        top: '$1',
                        right: '$1',
                        cursor: 'pointer',
                        background: '$mauve1',
                        display: 'flex',
                        borderRadius: '$full',
                        p: '$1'
                      }}
                    >
                      <X size="20px" />
                    </Box>
                  </DialogClose>
                </DialogContent>
              </Dialog>
              <ThemeChanger />
            </ButtonGroup>
          )}
        </Flex>
        <Flex
          css={{
            flexWrap: 'nowrap',
            marginLeft: '$4',
            overflowX: 'scroll',
            '&::-webkit-scrollbar': {
              height: 0,
              background: 'transparent'
            },
            scrollbarColor: 'transparent',
            scrollbarWidth: 'none'
          }}
        >
          <Stack
            css={{
              ml: '$4',
              gap: '$3',
              flexWrap: 'nowrap',
              alignItems: 'center',
              marginLeft: 'auto'
            }}
          >
            <ButtonGroup>
              <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref shallow>
                <Button as="a" outline={!router.pathname.includes('/develop')} uppercase>
                  Develop
                </Button>
              </Link>
              <Link href={gistId ? `/deploy/${gistId}` : '/deploy'} passHref shallow>
                <Button as="a" outline={!router.pathname.includes('/deploy')} uppercase>
                  Deploy
                </Button>
              </Link>
              <Link href={gistId ? `/test/${gistId}` : '/test'} passHref shallow>
                <Button as="a" outline={!router.pathname.includes('/test')} uppercase>
                  Test
                </Button>
              </Link>
            </ButtonGroup>
            <Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
              <a target="_blank" rel="noreferrer noopener">
                <Button outline>
                  <BookOpen size="15px" />
                </Button>
              </a>
            </Link>
          </Stack>
        </Flex>
      </Container>
    </Box>
  )
}

export default Navigation