import { HoverCard, Typography, List, Box } from '@tidbcloud/uikit'
import { IconHelpCircle } from '@tidbcloud/uikit/icons'
import React from 'react'

import { CentralPocQuestionType } from 'dbaas/services'

export interface ContactUsQuestion {
  key: string
  question: string
  label?: (questions: { optionIndex: string }[]) => string
  options?: { name: string; is_selected?: boolean }[]
  type: CentralPocQuestionType
  required?: boolean
  note?: string
  helper?: React.ReactNode
}

export const questions: ContactUsQuestion[] = [
  {
    key: 'poc_record_type',
    question: 'How can we help?',
    helper: (
      <HoverCard withArrow width={280}>
        <HoverCard.Target>
          <Box sx={{ verticalAlign: 'middle', display: 'inline-flex', alignItems: 'center' }}>
            <IconHelpCircle size={16} />
          </Box>
        </HoverCard.Target>
        <HoverCard.Dropdown>
          <Typography variant="title-sm" fw={500}>
            Apply for PoC
          </Typography>
          <Typography fz={12} fw={400}>
            Get started with up to 14 days free production-level verification and expert technical support.
          </Typography>
          <Typography variant="title-sm" fw={500} mt={8}>
            Schedule a demo
          </Typography>
          <List fz={12} fw={400}>
            <List.Item>How TiDB Cloud's platform work for you</List.Item>
            <List.Item>A short demo of the product</List.Item>
            <List.Item>Any questions</List.Item>
          </List>
        </HoverCard.Dropdown>
      </HoverCard>
    ),
    options: [
      {
        name: 'Apply for PoC'
      },
      {
        name: 'Schedule a demo'
      },
      {
        name: 'Request free trial credits'
      }
    ],
    type: CentralPocQuestionType.RADIO,
    note: '',
    required: true
  },
  {
    key: 'sub_topic',
    label(questions) {
      if (questions[0] && questions[0].optionIndex === '1') {
        return 'What are you primarily looking to demo?'
      }
      return 'What are you primarily looking to test?'
    },
    question: 'What are you primarily looking to demo/test?',
    options: [
      {
        name: 'Availability or durability'
      },
      {
        name: 'Compatibility'
      },
      {
        name: 'Query performance'
      },
      {
        name: 'Scalability'
      },
      {
        name: 'Data migration'
      },
      {
        name: 'Ease of use'
      },
      {
        name: 'Security'
      },
      {
        name: 'Integrations'
      },
      {
        name: 'Other'
      }
    ],
    type: CentralPocQuestionType.RADIO,
    note: '',
    required: true
  },
  {
    key: 'msg',
    question: 'Tell us about your requirements or message',
    type: CentralPocQuestionType.TEXT,
    note: ''
  }
]