import React from "react"
import { classNames } from "../../../utils"
import { ChartSkeleton, ChartSkeletonProps } from "../ChartSkeleton"
import { ScatterplotSkeleton } from "../Scatterplot/ScatterplotSkeleton"

type TimeSeriesChartSkeletonLineProps = {
  className?: string
}

const TimeSeriesChartSkeletonLine = ({
  className,
}: TimeSeriesChartSkeletonLineProps) => {
  return (
    <svg
      className={classNames(
        "size-full animate-pulse text-bg-additional-3",
        className,
      )}
      preserveAspectRatio="none"
      viewBox="0 0 1200 680"
    >
      <path
        className="stroke-current"
        d="M0,340
        L150,300
        L300,380
        L450,260
        L600,420
        L750,210
        L900,460
        L1050,250
        L1200,340"
        fill="none"
        strokeWidth="6"
      />
    </svg>
  )
}

export type TimeSeriesChartSkeletonProps = Omit<
  ChartSkeletonProps,
  "content"
> & {
  showLine?: boolean
  showScatter?: boolean
}

const TimeSeriesChartSkeletonBase = ({
  showLine = true,
  showScatter,
  ...rest
}: TimeSeriesChartSkeletonProps) => {
  return (
    <ChartSkeleton
      content={
        <>
          {showLine && (
            <TimeSeriesChartSkeletonLine className={rest.skeletonClassName} />
          )}

          {showScatter && (
            <ScatterplotSkeleton.Dots className={rest.skeletonClassName} />
          )}
        </>
      }
      {...rest}
    />
  )
}

export const TimeSeriesChartSkeleton = Object.assign(
  TimeSeriesChartSkeletonBase,
  {
    Line: TimeSeriesChartSkeletonLine,
  },
)