import { CustomIcon } from '@src/components/CustomIcon'
import Tooltip from '@src/components/Tooltip'
import { useSingletons } from '@src/lib/boot'
import { reportRejection } from '@src/lib/trap'
import { engineStreamZoomToFit } from '@src/lib/utils'

export const HICAD_CAMERA_FIT_PADDING = 0.35

export function FitAllButton() {
  const { kclManager } = useSingletons()

  return (
    <button
      type="button"
      data-testid="hicad-fit-all-model"
      aria-label="Fit all model"
      onClick={() => {
        engineStreamZoomToFit({
          engineCommandManager: kclManager.engineCommandManager,
          padding: HICAD_CAMERA_FIT_PADDING,
        }).catch(reportRejection)
      }}
      className="group/fit relative pointer-events-auto grid h-8 w-8 shrink-0 place-items-center rounded-sm border border-chalkboard-20 bg-chalkboard-10/90 p-0 text-chalkboard-80 shadow-sm backdrop-blur-sm hover:border-primary hover:text-primary dark:border-chalkboard-80 dark:bg-chalkboard-100/90 dark:text-chalkboard-20 dark:hover:border-primary dark:hover:text-primary"
    >
      <CustomIcon name="scale" className="h-4 w-4" />
      <span className="sr-only">Fit all model</span>
      <Tooltip position="top-right" hoverOnly={true}>
        Fit all model
      </Tooltip>
    </button>
  )
}