import { defineStore } from "pinia";
import { ref } from "vue";
import {
  DEFAULT_HORIZONTAL_MARGIN,
  DEFAULT_IMAGE_BACKGROUND_COLOR,
  DEFAULT_IMAGE_HEIGHT,
  DEFAULT_IMAGE_WIDTH,
  DEFAULT_MARGIN_BACKGROUND_COLOR,
  DEFAULT_MARGIN_ENABLE,
  DEFAULT_MARGIN_LEFT_MARGIN,
  DEFAULT_VERTICAL_MARGIN,
  DEFAULT_VERTICAL_ROTATION,
} from "./const";
import { Size } from "./types";

export const useStore = defineStore("store", () => {
  const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR);

  const vMargin = ref(DEFAULT_VERTICAL_MARGIN);
  const vRotation = ref(DEFAULT_VERTICAL_ROTATION);
  const setVRotation = (newRotation: number) => (vRotation.value = newRotation);

  const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN);
  const hMargin2 = ref(DEFAULT_HORIZONTAL_MARGIN);

  const marginEnable = ref(DEFAULT_MARGIN_ENABLE);
  const marginColor = ref(DEFAULT_MARGIN_BACKGROUND_COLOR);
  const marginLeftMargin = ref(DEFAULT_MARGIN_LEFT_MARGIN);

  const imageWidth = ref(DEFAULT_IMAGE_WIDTH);
  const imageHeight = ref(DEFAULT_IMAGE_HEIGHT);
  const setImageSize = (size: Size) => {
    imageWidth.value = size.width;
    imageHeight.value = size.height;
  }
  const rotateImage = () => {
    const tmp = imageHeight.value;
    imageHeight.value = imageWidth.value;
    imageWidth.value = tmp;
  };

  const textPropisi = ref("Текст...");

  return {
    imageBackgroundColor,

    vMargin,
    vRotation,
    setVRotation,

    hMargin,
    hMargin2,

    marginEnable,
    marginColor,
    marginLeftMargin,

    imageWidth,
    imageHeight,
    setImageSize,
    rotateImage,

    textPropisi,
  };
});
