import { Badge, Box, Card, Divider, Grid, Group, Stack, Typography, TypographyProps } from '@tidbcloud/uikit'
import { IconCheck } from '@tidbcloud/uikit/icons'
import React from 'react'

import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'
import { eventTracking } from 'dbaas/utils/tracking'

interface TitleProps {
  label: string
  badge?: string
  description?: string
  disabled?: boolean
  labelProps?: TypographyProps
}

const Title = ({ label, badge, description, disabled, labelProps }: TitleProps) => {
  return (
    <div>
      <Group gap={8} mb={4}>
        <Typography variant="headline-sm" {...labelProps} c={disabled ? 'carbon.7' : labelProps?.c}>
          {label}
        </Typography>
        {badge && (
          <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
            {badge}
          </Badge>
        )}
      </Group>
      {description && (
        <Typography variant="body-lg" c="carbon.7" h={40}>
          {description}
        </Typography>
      )}
    </div>
  )
}

interface DescProps {
  disabled?: boolean
}

const Desc = ({ disabled, children }: React.PropsWithChildren<DescProps>) => {
  return (
    <Group gap={8} align="flex-start" mb={4}>
      <Box component={IconCheck} c={disabled ? 'carbon.6' : 'green.7'} size={16} h={20} strokeWidth={2}></Box>
      <Typography variant="body-lg" c={disabled ? 'carbon.6' : 'carbon.7'} sx={{ flex: 1 }}>
        {children}
      </Typography>
    </Group>
  )
}

const clusterPlanData = [
  {
    value: Commonv1beta1ServicePlan.Starter,
    title: 'Starter',
    subtitle: 'Start free and scale as you grow.',
    preview: false,
    disabled: false,
    description: [
      'On-demand compute and storage that scales to zero',
      '5GiB storage and 50M Request Units free each month',
      'Private connectivity',
      'Data protection in transit and at rest',
      '99.9% availability'
    ],
    themeColor: 'magenta.8'
  },
  {
    value: Commonv1beta1ServicePlan.Essential,
    title: 'Essential',
    subtitle: 'Provisioned scalability with simplicity and control.',
    preview: true,
    disabled: false,
    description: [
      'Simple provisioned compute that scales up instantly with Request Capacity Units, plus on-demand storage',
      'Private connectivity',
      '14 days backup retention with Point-in-Time Recovery',
      'Dual-layer data encryption',
      '99.99% availability with multi-zone redundancy'
    ],
    themeColor: 'violet.8'
  }
]

export interface ClusterPlanProps {
  value: Commonv1beta1ServicePlan
  onChange?: (plan: Commonv1beta1ServicePlan) => void
  planData?: {
    starter?: Partial<(typeof clusterPlanData)[number]>
    essential?: Partial<(typeof clusterPlanData)[number]>
  }
}
export const ClusterPlan = ({ value, onChange, planData }: ClusterPlanProps) => {
  const data = [
    {
      ...clusterPlanData[0],
      ...planData?.starter
    },
    {
      ...clusterPlanData[1],
      ...planData?.essential
    }
  ]
  return (
    <Box p="xl">
      <Group justify="space-between">
        <Typography variant="title-lg">Select a Plan</Typography>
      </Group>
      <Typography variant="body-lg" c="carbon.7" mt={4} mb="lg">
        Start your journey with TiDB Cloud.
      </Typography>
      <Grid gutter={8}>
        {data.map((plan) => (
          <Grid.Col span={{ md: 12, lg: 12 / data.length }} key={plan.title}>
            <Group w="100%" h="100%">
              <Card
                px="sm"
                py="md"
                w="100%"
                h="100%"
                key={plan.title}
                onClick={
                  plan.disabled
                    ? undefined
                    : () => {
                        onChange?.(plan.value)
                        eventTracking('CreateClusterPlan_Select_ButtonClicked', {
                          servicePlan: plan.value,
                          source: 'AliCloud - ClusterPlan'
                        })
                      }
                }
                sx={(theme) => {
                  const disabled = plan.disabled
                  const active = plan.value === value
                  const diffStyles = {
                    normal: {
                      static: {},
                      hover: {
                        cursor: 'pointer',
                        backgroundColor: theme.colors.carbon[2]
                      }
                    },
                    active: {
                      static: {
                        borderColor: theme.colors.carbon[9]
                      },
                      hover: {
                        cursor: 'pointer'
                      }
                    },
                    disabled: {
                      static: {},
                      hover: {
                        cursor: 'not-allowed'
                      }
                    }
                  }
                  const status =
                    [
                      {
                        status: 'disabled',
                        matched: disabled
                      },
                      {
                        status: 'active',
                        matched: active
                      },
                      {
                        status: 'normal',
                        matched: !disabled && !active
                      }
                    ].find((match) => match.matched)?.status || 'normal'
                  const styles = diffStyles[status]

                  return {
                    ...styles.static,
                    '&:hover': styles.hover
                  }
                }}
              >
                <Title
                  label={plan.title}
                  badge={plan.preview ? 'Preview' : undefined}
                  description={plan.subtitle}
                  labelProps={{ c: plan.themeColor }}
                />
                <Divider my="xs" mt="md" mx="-sm" />
                <Stack gap="4">
                  {plan.description.map((desc) => (
                    <Desc key={desc}>{desc}</Desc>
                  ))}
                </Stack>
              </Card>
            </Group>
          </Grid.Col>
        ))}
      </Grid>
    </Box>
  )
}