<script>
import { ref } from "vue";

export const GlobalColors = {
  /** The primary color of the application */
  primaryColor: "#0787BB",
  /** The secondary color of the application */
  secondaryColor: "#063651",
  /** The secondary background color of the application */
  secondaryBackgroundColorDark: "#363636",
  /** The text color of the application */
  textColor: "#c8c8c8",
  /** The light text color of the application */
  lightTextColor: "#ffffff",
  /** The dark text color of the application */
  textColorDark: "#5a5a5a",
  /** The hover color of the application */
  hoverColor: "#e6e6e6",
  /** The active color of the application */
  activeColor: "#e6e6e6",
  /** The background color of the application */
  backgroundColor: "#e6efff",
  /** The secondary background color of the application */
  secondaryBackgroundColor: "#063651",
  /** Active Background Color */
  activeBackgroundColor: "#475c7c",
  /** Disabled Background Color */
  disabledBackgroundColor: "#f9f9f9",
  /** Disabled Text Color */
  disabledTextColor: "#c8c8c8",
};

export const MenuColors = {
  /** The background color of the menu */
  backgroundColor: GlobalColors.secondaryBackgroundColor,
  /** The text color of the menu */
  textColor: GlobalColors.textColor,
  /** The hover color of the menu */
  hoverColor: GlobalColors.hoverColor,
  /** The active color of the menu */
  activeColor: GlobalColors.primaryColor,
  /** The active background color of the menu */
  activeBackgroundColor: GlobalColors.activeBackgroundColor,
  /** The parent background color of the menu */
  parentBackgroundColor: GlobalColors.secondaryBackgroundColor,
  /** The parent text color of the menu */
  parentTextColor: GlobalColors.textColor,
  /** The parent hover color of the menu */
  parentHoverColor: GlobalColors.hoverColor,
  /** The parent active color of the menu */
  parentActiveColor: GlobalColors.activeColor,
  /** The child background color of the menu */
  childBackgroundColor: GlobalColors.secondaryBackgroundColor,
  /** The child text color of the menu */
  childTextColor: GlobalColors.textColor,
  /** The child hover color of the menu */
  childHoverColor: GlobalColors.hoverColor,
  /** The child active color of the menu */
  childActiveColor: GlobalColors.activeColor,
};

export const HeaderColors = {
  /** The background color of the header */
  backgroundColor: GlobalColors.primaryColor,
  /** The text color of the header */
  textColor: GlobalColors.lightTextColor,
  /** The secondary text color of the header */
  textColorSecondary: GlobalColors.secondaryBackgroundColorDark,
};

export const ButtonColors = {
  success: {
    /** The background color of the button */
    backgroundColor: "#00be29",
    /** The text color of the button */
    textColor: GlobalColors.lightTextColor,
    /** The hover color of the button */
    hoverColor: "#00a226",
    /** The active color of the button */
    activeColor: "#00a226",
  },
  warning: {
    /** The background color of the button */
    backgroundColor: "#f0ad4e",
    /** The text color of the button */
    textColor: GlobalColors.lightTextColor,
    /** The hover color of the button */
    hoverColor: "#ec971f",
    /** The active color of the button */
    activeColor: "#ec971f",
  },
  default: {
    /** The background color of the button */
    backgroundColor: GlobalColors.secondaryBackgroundColor,
    /** The text color of the button */
    textColor: GlobalColors.lightTextColor,
    /** The hover color of the button */
    hoverColor: GlobalColors.hoverColor,
    /** The active color of the button */
    activeColor: GlobalColors.activeColor,
  },
};

export const InputColors = {
  default: {
    /** The background color of the input */
    backgroundColor: "#f9f9f9",
    /** The text color of the input */
    textColor: GlobalColors.textColor,
    /** The hover color of the input */
    hoverColor: GlobalColors.hoverColor,
    /** The active color of the input */
    activeColor: GlobalColors.activeColor,
  },
};

export const Colors = {
  /** The colors of the application */
  global: GlobalColors,
  /** The colors of the menus */
  menus: MenuColors,
  /** The colors of the headers */
  headers: HeaderColors,
  /** The colors of the buttons */
  buttons: ButtonColors,
  /** The colors of the inputs */
  inputs: InputColors,
};
</script>