import React from "react"; //import imgUrl from "../../../images/switch.png";

import switchConstants from "../Switch.constantProps";
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: "Switch Component",
      imgUrl: '',
      description: "Switches toggle the state of a single setting on or off."
    },
    tabsList: ["LabelPlacements", "Colors", "Sizes"],
    tabsDetail: {
      LabelPlacements: {
        displayName: "Label Placements -> Switch State Passed By Parent",
        description: "ShowCases different positions of label placements",
        componentsList: ["left", "right", "bottom", "top"],
        componentsDetail: {
          left: {
            labelPlacement: switchConstants.labelPlacement.left,
            color: switchConstants.color.primary,
            label: "Left",
            size: switchConstants.size.small,
            onToggle: () => {}
          },
          right: {
            labelPlacement: switchConstants.labelPlacement.right,
            color: switchConstants.color.secondary,
            label: "Right",
            checked: false,
            shape: switchConstants.shape.round,
            onToggle: () => {}
          },
          top: {
            labelPlacement: switchConstants.labelPlacement.top,
            color: switchConstants.color.primary,
            label: "Top",
            size: switchConstants.size.large,
            onToggle: () => {}
          },
          bottom: {
            labelPlacement: switchConstants.labelPlacement.bottom,
            color: switchConstants.color.primary,
            label: "Bottom",
            shape: switchConstants.shape.round,
            size: switchConstants.size.large,
            onToggle: () => {}
          }
        }
      },
      Colors: {
        displayName: "Colors -> Switch with local state",
        description: "Showcases visual variation of switch",
        componentsList: [switchConstants.color.primary, switchConstants.color.secondary],
        componentsDetail: {
          [switchConstants.color.primary]: {
            color: switchConstants.color.primary,
            size: switchConstants.size.large,
            shape: switchConstants.shape.round
          },
          [switchConstants.color.secondary]: {
            color: switchConstants.color.secondary
          }
        }
      },
      Sizes: {
        displayName: "Sizes -> Switch With Local State",
        description: "Showcases different sizes of Switch",
        componentsList: ["small", "medium", "large"],
        componentsDetail: {
          small: {
            size: switchConstants.size.small,
            color: switchConstants.color.primary,
            shape: switchConstants.shape.round
          },
          medium: {
            size: switchConstants.size.medium,
            color: switchConstants.color.secondary,
            checked: true,
            disabled: true
          },
          large: {
            size: switchConstants.size.large,
            color: switchConstants.color.secondary,
            shape: switchConstants.shape.round
          }
        }
      }
    }
  };
});