import { Minus, CornersOut, Plus } from "@phosphor-icons/react";
import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import { BottomControlDivider } from "./Divider";
import { bottomControlButtonClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";

export type ZoomControlsProps = {
  zoom: number;
  zoomPercent: number;
  dispatch: AppStore["dispatch"];
};

export function ZoomControls({ zoom, zoomPercent, dispatch }: ZoomControlsProps) {
  return (
    <div className={bottomControlMenuClass()}>
      <button type="button" className={bottomControlButtonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
        <Minus size={24} weight="regular" />
      </button>
      <span className={bottomControlValueClass()}>{zoomPercent}%</span>
      <button type="button" className={bottomControlButtonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
        <Plus size={24} weight="regular" />
      </button>
      <BottomControlDivider />
      <button type="button" className={bottomControlButtonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
        <CornersOut size={24} weight="regular" />
      </button>
    </div>
  );
}