import { BreakPointString } from '../models'

interface BreakPointTypeOption<T> {
  xs?: T
  sm?: T
  md?: T
  lg?: T
}


export class BreakPointType<T> {
  private readonly options: BreakPointTypeOption<T>

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option
  }

  getValue(currentBreakPoint: BreakPointString) {
    switch (currentBreakPoint) {
      case 'xs':
        return this.options.xs;
      case 'sm':
        return this.options.sm;
      case 'md':
        return this.options.md;
      case 'lg':
        return this.options.lg;
      default:
        return undefined;
    }
  }
}


export class YTBreakPoint {
  static readonly KEY = 'bp'
  private static declare instance: YTBreakPoint

  static getInstance() {
    if (!YTBreakPoint.instance) {
      YTBreakPoint.instance = new YTBreakPoint()
    }
    return YTBreakPoint.instance
  }

  setBreakPoint(width: number) {
    const vpWidth = px2vp(width)
    let bp = ''
    if (vpWidth < 320) {
      bp = 'xs'
    } else if (vpWidth < 600) {
      bp = 'sm'
    } else if (vpWidth < 840) {
      bp = 'md'
    } else {
      bp = 'lg'
    }
    AppStorage.setOrCreate<string>(YTBreakPoint.KEY, bp)
  }

  getBreakPoint() {
    return AppStorage.get<string>(YTBreakPoint.KEY)
  }
}