/* eslint-disable */
import React from "react";
import RadioConstants, { RadioGroupConstant } from "../RadioGroup.constantProps";
import imgUrl from "../../../images/radiogroup.png";
import decorationStyles from "./RadioGroup.model.decorator.module.css";
export default ((themeName, components) => ({
  header: {
    title: "RadioGroup Component",
    imgUrl: imgUrl,
    description: "RadioGroup component allow the user to select one option from a set."
  },
  tabsList: ["Context", "Variants", "Direction", "Sizes", "Colors", "Disabled", "CustomID"],
  tabsDetail: {
    Context: {
      displayName: "Radio Context",
      description: "The list of Radio Context group",
      componentsList: ["context"],
      componentType: components.RadioGroupContext,
      componentsDetail: {
        context: {
          name: "Radio Context Group",
          defaultValue: "Context1",
          children: () => {
            let Radio = components.Radio;
            return /*#__PURE__*/React.createElement(React.Fragment, null, " ", /*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "Context1",
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement("div", null, "|"), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "Context2",
              customClassName: {
                base: decorationStyles.radioItem
              }
            }));
          }
        }
      }
    },
    Variants: {
      displayName: "Variants",
      description: "The list of variant is shown",
      componentsList: [RadioConstants.variant.inner],
      componentsDetail: {
        inner: {
          name: "innergroup",
          defaultValue: "inner2",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "inner1",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "inner2",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "inner3",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        outer: {
          name: "outergroup",
          defaultValue: "outer3",
          customClassName: {
            base: decorationStyles.radioItem
          },
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "outer1",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "outer2",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "outer3",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        }
      }
    },
    Direction: {
      displayName: "Direction",
      description: "The list of Direction is shown",
      componentsList: [RadioGroupConstant.direction.horizontal, RadioGroupConstant.direction.vertical],
      componentsDetail: {
        [RadioGroupConstant.direction.horizontal]: {
          name: "rowgroup",
          defaultValue: "rowgroup1",
          direction: RadioGroupConstant.direction.horizontal,
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "rowgroup1",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "rowgroup2",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "rowgroup3",
              variant: RadioConstants.variant.inner,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        [RadioGroupConstant.direction.vertical]: {
          name: "columngroup",
          defaultValue: "columngroup2",
          direction: RadioGroupConstant.direction.vertical,
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "columngroup1",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItemVertical
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "columngroup2",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItemVertical
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "columngroup3",
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItemVertical
              }
            })];
          }
        }
      }
    },
    Sizes: {
      displayName: "Sizes",
      description: "The list of sizes based Radiobutton is shown",
      componentsList: ["small", "medium", "large"],
      componentsDetail: {
        small: {
          name: "smallgroup",
          defaultValue: "small3",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "small1",
              size: RadioConstants.size.small,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "small2",
              size: RadioConstants.size.small,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "small3",
              size: RadioConstants.size.small,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        medium: {
          name: "mediumgroup",
          defaultValue: "medium1",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "medium1",
              size: RadioConstants.size.medium,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "medium2",
              size: RadioConstants.size.medium,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "medium3",
              size: RadioConstants.size.medium,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        large: {
          name: "largegroup",
          defaultValue: "large2",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "large1",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "large2",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "large3",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        }
      }
    },
    Colors: {
      displayName: "Colors",
      description: "The list of colors based Radiobutton is shown",
      componentsList: ["primary", "danger"],
      componentsDetail: {
        primary: {
          name: "primarygroup",
          defaultValue: "primary1",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "primary1",
              color: RadioConstants.color.primary,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "primary2",
              color: RadioConstants.color.primary,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "primary3",
              color: RadioConstants.color.primary,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        danger: {
          name: "dangergroup",
          defaultValue: "danger2",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "danger1",
              color: RadioConstants.color.danger,
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "danger2",
              color: RadioConstants.color.danger,
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "danger3",
              color: RadioConstants.color.danger,
              variant: RadioConstants.variant.outer,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        }
      }
    },
    Disabled: {
      displayName: "Disabled",
      description: "This defines the disabled state",
      componentsList: ["Disabled"],
      componentsDetail: {
        Disabled: {
          name: "disabledgroup",
          defaultValue: 'disabled2',
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              value: "disabled1",
              disabled: true,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              value: "disabled2",
              disabled: true,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              value: "disabled3",
              disabled: true,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        }
      }
    },
    CustomID: {
      displayName: "Customization",
      description: "Custom Id & ClassName related examples",
      componentsList: ["CustomId", "CustomClassNameString", "CustomClassName"],
      componentsDetail: {
        CustomId: {
          name: "customIdGroup",
          customId: "custom_radio_group",
          defaultValue: "custom_radioitem_1",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              customId: "custom_radioitem_1",
              value: "custom_radioitem_1",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              customIdPrefix: "11",
              value: "custom_radioitem_2",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              customIdSuffix: "90",
              value: "custom_radioitem_3",
              size: RadioConstants.size.large,
              customClassName: {
                base: decorationStyles.radioItem
              }
            })];
          }
        },
        CustomClassNameString: {
          name: "CustomClassNameString",
          customClassName: "CustomClassNameString123",
          defaultValue: "customclass_radioitem3",
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              customClassName: decorationStyles.radioItem,
              value: "customclass_radioitem1",
              size: RadioConstants.size.large
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              customClassName: decorationStyles.radioItem,
              value: "customclass_radioitem2",
              size: RadioConstants.size.large
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "Windows",
              customClassName: decorationStyles.radioItem,
              value: "customclass_radioitem3",
              size: RadioConstants.size.large
            })];
          }
        },
        CustomClassName: {
          name: "CustomClassName",
          defaultValue: 'customclass_radioitem22',
          customClassName: {
            radioGroup: "radioGroup",
            direction: "directionCss"
          },
          children: () => {
            let Radio = components.Radio;
            return [/*#__PURE__*/React.createElement(Radio, {
              text: "Android",
              customClassName: {
                base: decorationStyles.radioItem,
                size: decorationStyles.customSize,
                checked: decorationStyles.customColor,
                color: '',
                focusVisible: decorationStyles.focusVisible
              },
              value: "customclass_radioitem11",
              size: RadioConstants.size.large
            }), /*#__PURE__*/React.createElement(Radio, {
              text: "IOS",
              customClassName: {
                base: decorationStyles.radioItem,
                size: decorationStyles.customSize,
                color: '',
                checked: decorationStyles.customColor,
                focusVisible: decorationStyles.focusVisible
              },
              value: "customclass_radioitem22",
              size: RadioConstants.size.large
            })];
          }
        }
      }
    }
  }
}));