import React from "react";
import FlashSale from "../components/FlashSale";
import {
  mockFalshSaleFake,
  mockFalshSaleEndDate,
  FlashSaleRight,
  FlashSaleLeft,
  FlashSaleCenter,
} from "../../__MOCK__/mockFlashSale";

export default {
  title: "page-ui/FlashSale",
  component: FlashSale,
};

const Template = (args) => <FlashSale {...args} />;

export const Default = Template.bind({});
Default.args = {
  data: mockFalshSaleEndDate,
  dataAll: mockFalshSaleEndDate,
  columnLength: 0,
};

export const FakeTime = Template.bind({});
FakeTime.args = {
  data: mockFalshSaleFake,
  dataAll: mockFalshSaleFake,
  columnLength: 0,
  isPreview: true,
};

export const FlashSaleRightIsPreview  = Template.bind({});
FlashSaleRightIsPreview.args = {
  data:FlashSaleRight,
  dataAll: FlashSaleRight,
  isPreview: true,
  columnLength: 0,
};

export const FlashSaleLeftIsPreview  = Template.bind({});
FlashSaleLeftIsPreview.args = {
  data:FlashSaleLeft,
  dataAll: FlashSaleLeft,
  isPreview: true,
  columnLength: 0,
};

export const FlashSaleCenterIsPreview  = Template.bind({});
FlashSaleCenterIsPreview.args = {
  data:FlashSaleCenter,
  dataAll: FlashSaleCenter,
  isPreview: true,
  columnLength: 0,
};

export const FlashSaleCenterIsPreviewExpire  = Template.bind({});
FlashSaleCenterIsPreviewExpire.args = {
  data:{
    "endDate": "2023-10-26T17:00:00.000Z",
    "repeat": 0,
    "backgroundColor": "#26D496",
    "text": "ราคาพิเศษจะหมดภายใน",
    "fontColor": "#2A2C2D"
},
  dataAll: {
    "type": "flashsale",
    "order": 1,
    "column": 1,
    "metaData": {
        "text": "ราคาพิเศษจะหมดภายใน",
        "endDate": "2023-10-26T17:00:00.000Z",
        "timeleft": null,
        "repeat": 0
    },
    "style": {
        "marginLeft": 100,
        "marginBottom": 16,
        "marginRight": 100,
        "fontColor": "#2A2C2D",
        "backgroundColor": "#26D496",
        "css": "",
        "activeTab": "color",
        "isFullWidth": false,
        "marginTop": 16,
        "borderWidth": 1,
        "borderRadius": 0,
        "borderStyle": "none",
        "borderColor": "#000000",
        "isUseBackground": true,
        "align": "right",
        "color": {
            "backgroundColor": "#F48715",
            "opacity": 100
        }
    }
},
  // isPreview: true,
  columnLength: 1,
};