import { list } from "radash"
import React from "react"
import { classNames } from "../../../utils"
import { Skeleton } from "../../Skeleton"
import { ChartSkeleton, ChartSkeletonProps } from "../ChartSkeleton"
import { RANDOM_POSITIONS_X, RANDOM_POSITIONS_Y } from "./constants"

// Returns a random position percentage value between 5% and 95%
const getRandomPosition = (index: number) => {
  return {
    x: RANDOM_POSITIONS_X[index % RANDOM_POSITIONS_X.length],
    y: RANDOM_POSITIONS_Y[index % RANDOM_POSITIONS_Y.length],
  }
}

export type ScatterplotSkeletonProps = Omit<ChartSkeletonProps, "content"> &
  Pick<ScatterplotSkeletonDotsProps, "numPoints">

const ScatterplotSkeletonBase = ({
  numPoints = 60,
  ...rest
}: ScatterplotSkeletonProps) => {
  return (
    <ChartSkeleton
      content={
        <>
          {list(1, numPoints).map(index => (
            <Skeleton.Circle
              className={classNames(
                "absolute size-1.5",
                rest.skeletonClassName,
              )}
              key={index}
              style={{
                left: getRandomPosition(index).x,
                top: getRandomPosition(index).y,
              }}
            />
          ))}
        </>
      }
      {...rest}
    />
  )
}

type ScatterplotSkeletonDotsProps = {
  numPoints?: number
  className?: string
}

const ScatterplotSkeletonDots = ({
  numPoints = 60,
  className,
}: ScatterplotSkeletonDotsProps) => {
  return list(1, numPoints).map(index => (
    <Skeleton.Circle
      className={classNames("absolute size-2", className)}
      key={index}
      style={{
        left: getRandomPosition(index).x,
        top: getRandomPosition(index).y,
      }}
    />
  ))
}

export const ScatterplotSkeleton = Object.assign(ScatterplotSkeletonBase, {
  Dots: ScatterplotSkeletonDots,
})