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

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

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

  getValue(currentBreakPoint: string) {
    if (currentBreakPoint === 'xs') {
      return this.options.xs
    } else if (currentBreakPoint === 'sm') {
      return this.options.sm
    } else if (currentBreakPoint === 'md') {
      return this.options.md
    } else if (currentBreakPoint === 'lg') {
      return this.options.lg
    } else {
      return undefined
    }
  }
}


class YTBreakPoint {
  readonly KEY = 'bp'

  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>(this.KEY, bp)
  }

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

export const yTBreakPoint = new YTBreakPoint()