import React, { useState } from 'react'

import {
  Group,
  Card,
  ActionIcon,
  Box,
  Title,
  Stack,
  SegmentedControl,
  SegmentedControlItem,
  Tooltip
} from '@mantine/core'
import { useLocalStorage } from '@mantine/hooks'
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'

import { Chats } from './Chats'
import { MigicMirrorChats } from './MagicMirroChats'

const APPS: string[] | SegmentedControlItem[] = [
  { label: 'TiDB Bot', value: 'tibot' },
  { label: 'Magic Mirror', value: 'magic_mirror' }
]

export const ChatbotEntry = () => {
  const [showEntry, setShowEntry] = useLocalStorage({
    key: 'clinic.copilot_expand',
    defaultValue: true
  })
  const [app, setApp] = useState(APPS[0].value)

  return (
    <Box
      pos='fixed'
      style={{
        right: 0,
        bottom: 0,
        zIndex: 999,
        boxShadow:
          '0 1px 3px rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05) 0px 20px 25px -5px,rgba(0, 0, 0, 0.04) 0px 10px 10px -5px'
      }}
      h='calc(100% - 56px)'
      w={showEntry ? '400px' : '20px'}
    >
      <Tooltip disabled={showEntry} label='Clinic Copilot' position='left'>
        <ActionIcon
          pos='absolute'
          style={{
            top: '50%',
            left: showEntry ? '-12px' : '-12px',
            zIndex: 999
          }}
          radius='xl'
          variant='default'
          onClick={() => setShowEntry((v) => !v)}
        >
          {showEntry ? (
            <IconChevronRight size={18} />
          ) : (
            <IconChevronLeft size={18} />
          )}
        </ActionIcon>
      </Tooltip>

      <Card
        style={{
          display: showEntry ? 'block' : 'none'
        }}
        h='100%'
        p='lg'
      >
        <Stack h='100%' align='center' justify='space-between'>
          <Stack align='center'>
            <Title>Clinic Copilot</Title>
            <SegmentedControl value={app} onChange={setApp} data={APPS} />
          </Stack>
          <Group
            h='calc(100% - 120px)'
            w='100%'
            align='flex-end'
            position='center'
          >
            {app === 'tibot' ? <Chats /> : <MigicMirrorChats />}
          </Group>
        </Stack>
      </Card>
    </Box>
  )
}