utils.ts

// get the first key of given object that points to given value
import { Ref } from 'vue';
import { Dayjs } from 'dayjs';
import { i18nType } from '@/composables/i18n';
import {
  CustomEventData,
  Coloring,
  EventPopup,
  HTMLElementEvent,
  CalendarEvent,
  PydanticException,
  User,
  Alert,
  ListResponse,
  Availability,
  Appointment,
} from '@/models';
import { BookingStatus } from './definitions';

/**
 * Convert ISO weekday (1=Monday, 7=Sunday) to dayjs weekday (0=Sunday, 1=Monday, etc.)
 * @param isoDay - ISO weekday number (1-7)
 * @returns dayjs weekday number (0-6)
 */
export const isoWeekdayToDayjs = (isoDay: number): number => {
  return isoDay === 7 ? 0 : isoDay;
};

/**
 * Calculate the start of week for a given date based on user's preferred start of week.
 * @param date - Dayjs date object
 * @param startOfWeekIso - ISO weekday format: 1=Monday, 2=Tuesday, ..., 7=Sunday
 * @returns Dayjs object representing the start of the week
 */
export const getStartOfWeek = (date: Dayjs, startOfWeekIso: number): Dayjs => {
  // Convert ISO format (1=Monday, 7=Sunday) to dayjs format (0=Sunday, 1=Monday)
  const startOfWeekDayjs = isoWeekdayToDayjs(startOfWeekIso);

  // Get current day of week (0=Sunday, 1=Monday, ..., 6=Saturday)
  const currentDay = date.day();

  // Calculate the difference to get to the start of week
  const diff = (currentDay - startOfWeekDayjs + 7) % 7;

  return date.subtract(diff, 'day').startOf('day');
};

/**
 * Calculate the end of week for a given date based on user's preferred start of week.
 * @param date - Dayjs date object
 * @param startOfWeekIso - ISO weekday format: 1=Monday, 2=Tuesday, ..., 7=Sunday
 * @returns Dayjs object representing the end of the week
 */
export const getEndOfWeek = (date: Dayjs, startOfWeekIso: number): Dayjs => {
  // Get the start of week and add 6 days to get the end of week
  const weekStart = getStartOfWeek(date, startOfWeekIso);
  return weekStart.add(6, 'day').endOf('day');
};

/**
* Lowercases the first character of a string
*/
export const lcFirst = (s: string): string => {
  if (typeof s !== 'string' || !s) {
    return '';
  }

  return s[0].toLowerCase() + s.slice(1);
};

// Rotate the elements of an array for <n> steps. Works in both directions (n can be negative).
export const arrayRotate = <T>(a: T[], n: number): T[] => {
  a.push(...a.splice(0, (-n % a.length + a.length) % a.length));
  return a;
}

// Convert a numeric enum to an object for key-value iteration
export const enumToObject = (e: object): { [key in string]: number } => {
  const o = {};
  Object.keys(e).filter((v) => isNaN(Number(v))).forEach((k) => o[lcFirst(k)] = e[k]);
  return o;
};

// find a key by a given value and return it
export const keyByValue = (o: object, v: number|string, isEnum = false): number|string => {
  const e = isEnum ? enumToObject(o) : o;
  return Object.keys(e).find((k) => e[k] === v);
};

// create event color for border and background, inherited from calendar color attribute
export const eventColor = (event: CustomEventData, placeholder: boolean): Coloring => {
  const color = {
    border: null,
    background: null,
  };
  // color appointment slots
  if (!placeholder) {
    color.border = event.calendar_color;
    color.background = event.calendar_color;
    // keep solid background only for slots with attendee
    if (!event.attendee && !event.remote) {
      color.background += '22';
    }
  }

  return color;
};

// create initials from given name
export const initials = (name: string): string => {
  if (name) {
    const parts = name.toUpperCase().split(' ');
    return parts.length > 1
      ? parts[0][0] + parts.at(-1)[0]
      : name[0];
  }
  return '';
};

// file download
export const download = (data: BlobPart, filename: string, contenttype: string = 'text/plain'): void => {
  const a = document.createElement('a');
  const file = new Blob([data], { type: `${contenttype};charset=UTF-8`, endings: 'native' });
  // TODO: use fetch or similar to programmatically trigger a download
  const url = URL.createObjectURL(file);
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 0);
};

// handle time format, return dayjs format string
// can be either set by the user (local storage) or detected from system.
// This functions works independent from Pinia stores so that
// it can be called even if stores are not initialized yet.
export const timeFormat = (): string => {
  const fallbackFormat = import.meta.env?.VITE_DEFAULT_HOUR_FORMAT ?? 12;
  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}') as User;

  let use12HourTime = null;
  try {
    use12HourTime = Intl.DateTimeFormat(window.navigator.language, { hour: 'numeric' }).resolvedOptions()?.hour12 ?? null;
  } catch (_e: RangeError|any) {
    // Catch any range error raised by invalid language/locale codes and pass
  }

  // `.hour12` is an optional value and can be undefined (we cast it as null.) So default to our env value, and if not null use it.
  let detected = fallbackFormat;
  if (use12HourTime !== null) {
    detected = use12HourTime ? 12 : 24;
  }

  const format = Number(user.settings?.timeFormat ?? detected);
  return format === 24 ? 'HH:mm' : 'hh:mma';
};

// Check if we already have a local user preferred language
// Otherwise just use the navigators language.
// This functions works independent from Pinia stores so that
// it can be called even if stores are not initialized yet.
export const defaultLocale = () => {
  const user = JSON.parse(localStorage?.getItem('tba/user') ?? '{}') as User;
  return user?.settings?.language ?? navigator.language.split('-')[0];
};

// event popup handling
export const initialEventPopupData: EventPopup = {
  event: null,
  display: 'none',
  top: 0,
  left: 'initial',
  position: 'right',
};

// calculate properties of event popup for given element and show popup
export const showEventPopup = (el: HTMLElementEvent, event: CalendarEvent, position: string = 'right'): EventPopup => {
  const obj = { ...initialEventPopupData };
  obj.event = event;
  obj.display = 'block';

  // Get viewport dimensions
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // Estimate popup dimensions (based on EventPopup component)
  const popupWidth = 384; // max-w-sm = 384px
  const popupHeight = 120; // Estimated height based on content
  const offset = 4; // Gap between trigger and popup

  // Calculate trigger element position relative to viewport using getBoundingClientRect
  // This works correctly with position: fixed on the popup
  const triggerRect = el.target.getBoundingClientRect();
  const triggerLeft = triggerRect.left;
  const triggerRight = triggerRect.right;
  const triggerTop = triggerRect.top;

  const triggerCenterY = triggerTop + triggerRect.height / 2;
  const triggerCenterX = triggerLeft + triggerRect.width / 2;

  // Determine optimal position based on available space
  let optimalPosition = position;

  if (position === 'right' || !position) {
    // Check if popup would overflow right edge
    if (triggerRight + popupWidth + offset > viewportWidth) {
      // Check if left position would work (popup will be positioned at trigger's left edge)
      if (triggerLeft >= popupWidth + offset) {
        optimalPosition = 'left';
      } else {
        // Fall back to top position
        optimalPosition = 'top';
      }
    }
  } else if (position === 'left') {
    // Check if popup would overflow left edge (popup will be positioned at trigger's left edge)
    if (triggerLeft < popupWidth + offset) {
      // Check if right position would work
      if (triggerRight + popupWidth + offset <= viewportWidth) {
        optimalPosition = 'right';
      } else {
        // Fall back to top position
        optimalPosition = 'top';
      }
    }
  } else if (position === 'top') {
    // Check if popup would overflow top edge
    if (triggerTop - popupHeight - offset < 0) {
      // Try right position first
      if (triggerRight + popupWidth + offset <= viewportWidth) {
        optimalPosition = 'right';
      } else if (triggerLeft - popupWidth - offset >= 0) {
        optimalPosition = 'left';
      }
    }
  }

  // Additional check: if popup would overflow bottom edge, try to adjust
  if (triggerTop + popupHeight + offset > viewportHeight) {
    // If we're positioned to the right or left and would overflow bottom, try top
    if (optimalPosition === 'right' || optimalPosition === 'left') {
      if (triggerTop - popupHeight - offset >= 0) {
        optimalPosition = 'top';
      }
    }
  }

  // Set position based on optimal position using viewport-relative coordinates
  // These work correctly with position: fixed on the popup
  if (optimalPosition === 'right') {
    obj.top = `${triggerCenterY}px`;
    obj.left = `${triggerRight + offset}px`;
  } else if (optimalPosition === 'left') {
    obj.top = `${triggerCenterY}px`;
    obj.left = `${triggerLeft - offset}px`;
  } else if (optimalPosition === 'top') {
    obj.top = `${triggerTop - offset}px`;
    obj.left = `${triggerCenterX}px`;
  }

  // Store the optimal position for the component to use
  obj.position = optimalPosition;

  return obj;
};

/**
 * via: https://stackoverflow.com/a/11868398
 */
export const getAccessibleColor = (hexcolor: string): string => {
  const r = parseInt(hexcolor.substring(1, 3), 16);
  const g = parseInt(hexcolor.substring(3, 5), 16);
  const b = parseInt(hexcolor.substring(5, 7), 16);
  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
  return (yiq >= 160) ? 'black' : 'white';
};

/**
 * Helper function to parse hex color to RGB values
 * @param hexcolor - Hex color string (with or without #)
 * @returns Object with r, g, b values or null if invalid
 */
const parseHexToRgb = (hexcolor: string): { r: number, g: number, b: number } | null => {
  if (!hexcolor) return null;

  // Remove # if present
  const hex = hexcolor.replace('#', '');

  // Validate hex format (6 characters)
  if (hex.length !== 6) return null;

  // Parse r, g, b values
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return { r, g, b };
};

/**
 * Darken a hex color by a given percentage
 * @param hexcolor - Hex color string (with or without #)
 * @param percent - Amount to darken (0-100, default 20)
 */
export const darkenColor = (hexcolor: string, percent: number = 20): string => {
  const rgb = parseHexToRgb(hexcolor);
  if (!rgb) return hexcolor;

  // Calculate darkened values
  const darkenFactor = (100 - percent) / 100;
  const newR = Math.round(rgb.r * darkenFactor);
  const newG = Math.round(rgb.g * darkenFactor);
  const newB = Math.round(rgb.b * darkenFactor);

  // Convert back to hex and ensure two digits
  const toHex = (n: number) => n.toString(16).padStart(2, '0');

  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
};

/**
 * Convert a hex color to rgba with specified alpha
 * @param hexcolor - Hex color string (with or without #)
 * @param alpha - Alpha value (0-1)
 */
export const hexToRgba = (hexcolor: string, alpha: number = 1): string => {
  const rgb = parseHexToRgb(hexcolor);
  if (!rgb) return hexcolor;

  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
};

/**
 * Handles Pydantic errors, returns a form-level error message
 * or null if the error has to do with individual fields
 */
export const handleFormError = (i18n: i18nType, formRef: Ref, errObj: PydanticException): Alert => {
  const unknownError = i18n('error.somethingWentWrong');
  if (!errObj) {
    return { title: unknownError };
  }

  const fields = formRef.value.elements as HTMLFormControlsCollection;

  const { detail } = errObj;

  if (Array.isArray(detail)) {
    detail.forEach((err) => {
      const name = err?.loc[1];
      if (name) {
        // Could either be in the context, or as a general message
        const msg = err?.ctx?.reason ?? err.msg;
        fields[name].setCustomValidity(msg);
      }
    });
  } else if (typeof detail === 'string') { // HttpException errors are just strings
    return { title: detail };
  } else {
    return {
      title: detail?.message ?? unknownError,
      details: detail?.reason,
    };
  }

  // Finally report it!
  formRef.value.reportValidity();
  return null;
};

/**
 * Clears any existing form errors
 * @param formRef
 */
export const clearFormErrors = (formRef: Ref) => {
  const { elements } = formRef.value;
  // HTMLCollection doesn't support .forEach lol
  for (const element of elements) {
    element.setCustomValidity('');
  }
};

export const sleep = async (timeMs: number) => new Promise((resolve) => { window.setTimeout(resolve, timeMs); });

/**
 * Retrieve all the items from a ListResponse route staggered by 250ms per page.
 * @param requestFn
 * @param perPage
 * @param pageError
 */
export const staggerRetrieve = async (requestFn: any, perPage: number, pageError?: Ref<Alert>) => {
  // Load the first page to get the total amount of pages
  const response: ListResponse = await requestFn({
    page: 1,
    per_page: perPage,
  });
  const { data } = response;

  if (!data.value?.page_meta) {
    pageError.value = {
      title: 'Remote request error',
      details: 'There was a problem loading the list. Please try again.',
    };
    return null;
  }

  const { page, total_pages: totalPages } = data.value.page_meta;
  const { items } = data.value;
  let itemList = [...items];

  const promises = [];
  // Queue up the remainder of the pages as promises
  for (let i = page + 1; i < totalPages + 1; i += 1) {
    promises.push((async () => {
      // Stagger calls to avoid overloading the db
      await sleep(250 * i);
      return requestFn({
        page: i,
        per_page: perPage,
      });
    })());
  }

  // Execute them all at once
  const promiseResponses = await Promise.all(promises);
  promiseResponses.forEach((_response) => {
    const { data: _data } = _response;
    // We don't have page info in this context, so just display a generic error...
    if (!_data.value?.items) {
      pageError.value = {
        title: 'Remote request error',
        details: 'There was a problem loading some items. Please refresh and try again.',
      };
      return;
    }
    itemList = itemList.concat(_data.value?.items ?? []);
  });

  return itemList;
};

/**
 * Calculate number of minutes from formatted time string.
 * @param formattedTime A string of format HH:MM
 */
export const hhmmToMinutes = (formattedTime: string | Dayjs): number => {
  if (typeof formattedTime === 'object') {
    formattedTime = formattedTime.format('HH:mm');
  }
  const [hours, minutes] = formattedTime.split(':');
  return (Number(hours) * 60 + Number(minutes));
};

/**
 * Calculate number of minutes from formatted time string.
 * @param formattedTime A string of format HH:MM
 */
export const minutesToHhmm = (minutes: number): string => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
};

/**
 * Compare two availabilities by their start time
 */
export const compareAvailabilityStart = (a: Availability, b: Availability) => {
  return hhmmToMinutes(a.start_time) - hhmmToMinutes(b.start_time)
};

/**
 * Kill all references to arrays or objects within the given entity and return a deep clone
 */
export const deepClone = (entity: any): any => {
  return JSON.parse(JSON.stringify(entity));
};

/**
 * Return true if the Appointment is not confirmed by the owner yet
 */
export const isUnconfirmed = (a: Appointment): boolean => {
  return a.slots[0].booking_status === BookingStatus.Requested;
};

export default {
  keyByValue,
  arrayRotate,
  eventColor,
  initials,
  download,
  timeFormat,
  defaultLocale,
  initialEventPopupData,
  showEventPopup,
  getAccessibleColor,
  darkenColor,
  hexToRgba,
  handleFormError,
  sleep,
  hhmmToMinutes,
  minutesToHhmm,
  compareAvailabilityStart,
  deepClone,
  isUnconfirmed,
  isoWeekdayToDayjs,
  getStartOfWeek,
  getEndOfWeek,
};