import { useComputedColorScheme } from '@tidbcloud/uikit'

import AlibabaCloudSVG from 'media/logo/alibaba-cloud-logo.svg?react'
import AmazonBedrockSVG from 'media/logo/amazon-bedrock.svg?react'
import AWSDarkSVG from 'media/logo/aws-darkmode.svg?react'
import AWSLightSVG from 'media/logo/aws-regular.svg?react'
import AzureSVG from 'media/logo/azure-logo.svg?react'
import CohereSVG from 'media/logo/cohere.svg?react'
import DatadogDarkSVG from 'media/logo/datadog-white.svg?react'
import DatadogSVG from 'media/logo/datadog.svg?react'
import GCPLiteSVG from 'media/logo/gcp-icon.svg?react'
import GCPLightSVG from 'media/logo/gcp-regular.svg?react'
import GCPDarkSVG from 'media/logo/gcp-white.svg?react'
import GithubSVG from 'media/logo/github-logo.svg?react'
import GithubDarkSVG from 'media/logo/github-white.svg?react'
import NewRelicSVG from 'media/logo/newrelic.svg?react'
import NextJsDarkSVG from 'media/logo/next-js-dark.svg?react'
import NextJsSVG from 'media/logo/next-js.svg?react'
import PrometheusSVG from 'media/logo/prometheus.svg?react'
import VercelSVG from 'media/logo/vercel-dynamic.svg?react'
import ZapierSVG from 'media/logo/zapier.svg?react'

export type LogoVendors =
  | 'aws'
  | 'gcp'
  | 'datadog'
  | 'vercel'
  | 'zapier'
  | 'newrelic'
  | 'prometheus'
  | 'github'
  | 'gcp-lite'
  | 'azure'
  | 'alicloud'
  | 'amazon-bedrock'
  | 'cohere'
  | 'next-js'

interface VendorLogoProps extends React.SVGProps<SVGSVGElement> {
  mode?: 'light' | 'dark'
  name: LogoVendors
  size?: number
}

export const VendorLogo: React.FC<React.PropsWithChildren<VendorLogoProps>> = ({ name, size, mode, ...rest }) => {
  const colorScheme = useComputedColorScheme()
  const currentMode = mode ?? colorScheme
  const logos: Record<'light' | 'dark', Record<LogoVendors, typeof AWSDarkSVG>> = {
    light: {
      aws: AWSLightSVG,
      gcp: GCPLightSVG,
      datadog: DatadogSVG,
      vercel: VercelSVG,
      zapier: ZapierSVG,
      newrelic: NewRelicSVG,
      prometheus: PrometheusSVG,
      github: GithubSVG,
      'gcp-lite': GCPLiteSVG,
      azure: AzureSVG,
      alicloud: AlibabaCloudSVG,
      'amazon-bedrock': AmazonBedrockSVG,
      cohere: CohereSVG,
      'next-js': NextJsSVG
    },
    dark: {
      aws: AWSDarkSVG,
      gcp: GCPDarkSVG,
      datadog: DatadogDarkSVG,
      vercel: ({ ...rest }: VendorLogoProps) => <VercelSVG {...rest} />,
      zapier: ZapierSVG,
      newrelic: NewRelicSVG,
      prometheus: PrometheusSVG,
      github: GithubDarkSVG,
      'gcp-lite': GCPLiteSVG,
      azure: AzureSVG,
      alicloud: AlibabaCloudSVG,
      'amazon-bedrock': AmazonBedrockSVG,
      cohere: CohereSVG,
      'next-js': NextJsDarkSVG
    }
  }
  const Comp = logos[currentMode][name]
  return <Comp width={size} height={size} {...rest} />
}