import { pipe, values, pluck } from "ramda";
import { Layout, Layouts } from "react-grid-layout";

export const PLACE_ORDER_WIDTH = 320;

export enum LayoutMedia {
  LG = "lg",
  MD = "md",
  SM = "sm",
  XS = "xs"
}

export interface BreakpointsProps {
  [P: string]: number;
}
export interface ColsProps extends BreakpointsProps {}
export interface LayoutMapConfigProps {
  [P: string | symbol]: {
    col: number;
    breakpoint: number;
    dataGrid: Array<Layout>;
  };
}
export const LayoutMapConfig: LayoutMapConfigProps = {
  [LayoutMedia.LG]: {
    col: 14,
    breakpoint: 2660,
    dataGrid: [
      { i: "T", x: 0, y: 0, w: 10, h: 0.375 },
      { i: "V", x: 0, y: 0.375, w: 10, h: 5.9 },
      { i: "E", x: 12, y: 0, w: 2, h: 6.275 },
      { i: "L", x: 10, y: 0, w: 2, h: 6.275 },
      { i: "O", x: 0, y: 6.275, w: 14, h: 3 }
    ]
  },
  [LayoutMedia.MD]: {
    col: 10,
    breakpoint: 1920,
    dataGrid: [
      { i: "T", x: 0, y: 0, w: 8, h: 0.375 },
      { i: "V", x: 0, y: 0.375, w: 8, h: 4 },
      { i: "E", x: 8, y: 0, w: 2, h: 4.375 },
      { i: "L", x: 8, y: 4.375, w: 2, h: 3 },
      { i: "O", x: 0, y: 4.375, w: 8, h: 3 }
    ]
  },
  [LayoutMedia.SM]: {
    col: 13,
    breakpoint: 1680,
    dataGrid: [
      { i: "T", x: 0, y: 0, w: 10, h: 0.57 },
      { i: "V", x: 0, y: 0.5714, w: 10, h: 5.53 },
      { i: "E", x: 10, y: 0, w: 3, h: 4.2 },
      { i: "L", x: 10, y: 4.2, w: 3, h: 1.9 },
      { i: "O", x: 0, y: 6.1, w: 13, h: 4.57 }
    ]
  },
  [LayoutMedia.XS]: {
    col: 7,
    breakpoint: 1200,
    dataGrid: [
      { i: "T", x: 0, y: 0, w: 5, h: 0.375 },
      { i: "V", x: 0, y: 0.375, w: 5, h: 3.18 },
      { i: "E", x: 5, y: 0.375, w: 2, h: 3.555 },
      { i: "L", x: 0, y: 0, w: 0, h: 0 },
      { i: "O", x: 0, y: 3.555, w: 7, h: 3 }
    ]
  }
};

export const layouts: Layouts = pluck("dataGrid" as any, LayoutMapConfig);
export const breakpoints: BreakpointsProps = pluck("breakpoint" as any, LayoutMapConfig);
export const cols: ColsProps = pluck("col" as any, LayoutMapConfig);
export const purePoints: Array<number | string> = pipe(values, pluck("breakpoint"))(LayoutMapConfig);