import { useProps, xml } from "@odoo/owl";
import { Component } from "../../owl3_compatibility_layer";
import { useStore } from "../../store_engine/store_hooks";
import { ViewportsStore } from "../../stores/viewports_store";
import { ZoomStore } from "../../stores/zoom_store";
import { SpreadsheetChildEnv } from "../../types/spreadsheet_env";
import { Store } from "../../types/store_engine";
import { types } from "../props_validation";
import { ScrollBar } from "./scrollbar";

export class VerticalScrollBar extends Component<SpreadsheetChildEnv> {
  static components = { ScrollBar };
  private viewStore!: Store<ViewportsStore>;
  private zoomStore!: Store<ZoomStore>;
  static template = xml/*xml*/ `
    <ScrollBar
      t-if="this.isDisplayed"
      height="this.height"
      position="this.position"
      offset="this.offset"
      direction="'vertical'"
      onScroll.bind="(offset) => this.onScroll(offset)"
    />`;

  setup(): void {
    this.viewStore = useStore(ViewportsStore);
    this.zoomStore = useStore(ZoomStore);
  }

  protected props = useProps({
    topOffset: types.number().optional(0),
    hasFooter: types.boolean().optional(true),
  });

  get offset() {
    return this.viewStore.viewports.getSheetScrollInfo(this.viewStore.displayedSheetId).scrollY;
  }

  get height() {
    return this.viewStore.viewports.getMainViewportRect(this.viewStore.displayedSheetId).height;
  }

  get isDisplayed() {
    const { yRatio } = this.viewStore.viewports.getFrozenSheetViewRatio(
      this.viewStore.displayedSheetId
    );
    return yRatio < 1;
  }

  get position() {
    const { y } = this.viewStore.viewports.getMainViewportRect(this.viewStore.displayedSheetId);
    const scrollbarWidth = this.zoomStore.scrollBarWidth;
    return {
      top: `${this.props.topOffset + y}px`,
      right: "0px",
      width: `${scrollbarWidth}px`,
      bottom: this.props.hasFooter ? `${scrollbarWidth}px` : "0px",
    };
  }

  onScroll(offset) {
    const { scrollX } = this.viewStore.viewports.getSheetScrollInfo(
      this.viewStore.displayedSheetId
    );
    this.viewStore.setViewportOffset({
      offsetX: scrollX, // offsetX is the same
      offsetY: offset,
    });
  }
}