import { Card, List, Table, Typography, ListProps, TypographyProps, Box, Badge, HoverCard } from '@tidbcloud/uikit'
import { IconMinus, IconCheck, IconInfoCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import React from 'react'

import { FormsBindedSupportPlan, FormsSupportPlan } from 'dbaas/services'
import { useGetMspCustomer } from 'dbaas/services/account'
import useStores from 'dbaas/stores/useStores'

import { ActivePlan } from './ActivePlan'
import { useStyles } from './index.styles'
import { PlanFeatures, PlanTier, PlansContent } from './plans'

export interface FeatureItemProps extends Omit<ListProps, 'children'> {
  features: (React.ReactNode | boolean | undefined)[]
  showLevel?: boolean
  levelProps?: TypographyProps
  raw?: string
}

export const FeatureItem: React.FC<React.PropsWithChildren<FeatureItemProps>> = ({
  features,
  showLevel,
  levelProps,
  raw,
  ...rest
}) => {
  const hasfeat = !!features[0]
  return (
    <List
      styles={(theme) => ({
        root: {
          padding: 0,
          margin: 0
        },
        item: {
          fontSize: 13,
          color: theme.colors.carbon[8],
          lineHeight: '18px'
        },
        itemIcon: {
          display: 'flex',
          alignSelf: 'center',
          marginRight: 8
        }
      })}
      icon={
        <Box
          component={!hasfeat ? IconMinus : IconCheck}
          size={16}
          c={!hasfeat ? 'yellow.7' : 'green.7'}
          strokeWidth={2}
        />
      }
      {...rest}
    >
      {features.map((feat, index) => {
        return <List.Item key={index.toString()}>{feat === true ? raw : feat}</List.Item>
      })}
    </List>
  )
}

export const PlansComparison: React.FC<
  React.PropsWithChildren<{
    plansMap: Record<string, FormsSupportPlan>
    bindedPlan: FormsBindedSupportPlan
    planTiers: PlanTier[]
  }>
> = observer(({ bindedPlan, planTiers }) => {
  const { classes } = useStyles()
  const {
    store: {
      tenantData,
      config: { isMSPCustomer }
    }
  } = useStores()

  const { data: mspCustomer } = useGetMspCustomer(tenantData.id, {
    query: { enabled: isMSPCustomer }
  })

  const renderCurrentPlan = (tier: PlanTier) => {
    const active = bindedPlan.level === tier.level
    return (
      <PlansContent
        tier={tier}
        active={active}
        activeDate={mspCustomer?.effected_at || bindedPlan.active_date}
        tipsWidth={220}
      />
    )
  }

  const activePlanTier = planTiers.find((tier) => tier.level === bindedPlan.level) as PlanTier

  return (
    <Box mt={24}>
      <ActivePlan planTier={activePlanTier} bindedPlan={bindedPlan} />
      <Typography variant="title-lg" mt={48}>
        All Support Plans
      </Typography>
      <Card mt={16} mb={56} p={0} pb={20}>
        <Table
          className={classes.table}
          verticalSpacing={8}
          horizontalSpacing={12}
          withColumnBorders={false}
          withRowBorders={false}
          h={1}
        >
          <Table.Thead>
            <Table.Tr>
              {planTiers.map((plan) => {
                return (
                  <Table.Td key={plan.level} p="10px 16px" bg="carbon.2">
                    <Typography variant="headline-lg" fz={16} lh={'20px'} fw={700} c="carbon.8" display="inline">
                      {plan.title}
                    </Typography>
                    {plan.level === bindedPlan.level && (
                      <Badge variant="outline" color="peacock.7" size="sm" sx={{ verticalAlign: 'middle' }} ml={10}>
                        Current
                      </Badge>
                    )}
                    {plan.titleTips && (
                      <HoverCard width={320}>
                        <HoverCard.Target>
                          <IconInfoCircle sx={{ verticalAlign: 'middle' }} ml={8} size={16} />
                        </HoverCard.Target>
                        <HoverCard.Dropdown>{plan.titleTips}</HoverCard.Dropdown>
                      </HoverCard>
                    )}
                  </Table.Td>
                )
              })}
            </Table.Tr>
            <Table.Tr>
              {planTiers.map((plan) => {
                return (
                  <Box component="td" key={plan.level} p="16px 16px" valign="top">
                    <Typography variant="body-lg" fz={13} c="carbon.7">
                      {plan.intro}
                    </Typography>
                  </Box>
                )
              })}
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            <Table.Tr>
              {planTiers.map((plan, index) => (
                <Table.Td key={plan.level + index.toString()}>{renderCurrentPlan(plan)}</Table.Td>
              ))}
            </Table.Tr>
            {PlanFeatures.map((feature, rowIndex) => {
              return (
                <>
                  <Table.Tr
                    key={rowIndex.toString()}
                    sx={(theme) => ({
                      borderTop: `1px solid ${theme.colors.carbon[3]} !important`,
                      borderBottom: `1px solid ${theme.colors.carbon[3]} !important`
                    })}
                  >
                    {new Array(planTiers.length).fill(0).map((_item, index) => {
                      return <Table.Td key={index.toString()}>{feature.title}</Table.Td>
                    })}
                  </Table.Tr>
                  {feature.items.map((item, itemIndex) => {
                    return (
                      <Table.Tr key={itemIndex.toString()}>
                        {planTiers.map((plan) => {
                          return (
                            <Table.Td key={plan.level}>
                              <FeatureItem raw={item} features={[plan.features[rowIndex].features[itemIndex]]} />
                            </Table.Td>
                          )
                        })}
                      </Table.Tr>
                    )
                  })}
                </>
              )
            })}
          </Table.Tbody>
        </Table>
        <Typography variant="body-md" ta="right" mr={24} mt={24}>
          Business Hours: 9am - 6pm Local Time, Monday to Friday
        </Typography>
        <Typography variant="body-md" ta="right" mr={24} mt={10}>
          IM: Instant Message(We support Slack and Lark currently, and will support Teams in the future)
        </Typography>
      </Card>
    </Box>
  )
})