import React from 'react';
import constantProps from '../Select.constantProps';
import getDocIcon, { docsIcons } from '../../docsIcons';
import imgUrl from '../../../images/select.png';
import decorationStyles from '@zohodesk/docs/es/docsviewer/DocsViewer.module.css';
import Select, { Option } from '../Select';
import style from './Select.model.decorator.module.css';
import { SelectWithSearchExample } from './Select__search.docs';
import Select__scroll from './Select__scroll.docs';
export function Select__Example(prefix) {
  return /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Option, {
    value: "red"
  }, "Red ", prefix), /*#__PURE__*/React.createElement(Option, {
    value: "green",
    onChange: value => {
      console.log(value, 'option');
    }
  }, "Green ", prefix), /*#__PURE__*/React.createElement(Option, {
    value: "blue"
  }, "Blue ", prefix), /*#__PURE__*/React.createElement(Option, {
    value: "yellow"
  }, "Yellow ", prefix), /*#__PURE__*/React.createElement(Option, {
    value: "orange"
  }, "Orange ", prefix), /*#__PURE__*/React.createElement(Option, {
    value: "rose"
  }, "Rose ", prefix));
}
export function Select__ExampleCustomized() {
  return /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Option, {
    value: "red"
  }, "Red"), /*#__PURE__*/React.createElement(Option, {
    value: "green",
    onChange: value => {
      console.log(value, 'option');
    }
  }, "Green"), /*#__PURE__*/React.createElement(Option, {
    value: "blue"
  }, "Blue"), /*#__PURE__*/React.createElement(Option, {
    value: "yellow"
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      padding: '20px',
      display: 'inline-block'
    }
  }, "Yellow")), /*#__PURE__*/React.createElement(Option, {
    value: "orange"
  }, "Orange"), /*#__PURE__*/React.createElement(Option, {
    value: "rose"
  }, "Rose"));
}
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Select Component',
      imgUrl: imgUrl,
      description: 'Use the Select component to select one among the list of choices / items '
    },
    tabsList: ['Variants', 'Colors', 'Sizes', 'Disabled', 'Section', 'Search', 'Accessibility', 'CustomID', 'tagAttributes'],
    tabsDetail: {
      Variants: {
        displayName: 'Variants',
        description: 'The list of variant is shown',
        //componentsList: ["plain"],
        componentsList: ['plain', 'flushed', 'outlined', 'contained'],
        $decoratorItemClassName: style.fullwidth,
        componentsDetail: {
          plain: {
            selectedValue: 'red',
            variant: constantProps.variant.plain,
            size: constantProps.size.medium,
            children: Select__Example('Plain').props.children
          },
          flushed: {
            selectedValue: 'yellow',
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            children: Select__Example('Flushed').props.children
          },
          outlined: {
            selectedValue: 'green',
            variant: constantProps.variant.outlined,
            children: Select__Example('Outlined').props.children,
            size: constantProps.size.medium
          },
          contained: {
            selectedValue: 'blue',
            variant: constantProps.variant.contained,
            children: Select__Example('Contained').props.children,
            size: constantProps.size.medium
          }
        }
      },
      Colors: {
        displayName: 'Colors',
        description: 'The Colors based Buttons is shown',
        $decoratorItemClassName: style.fullwidth,
        componentsList: ['primaryPlain', 'primaryFlushed', 'primaryOutlined', 'primaryContained', 'secondaryPlain', 'secondaryFlushed', 'secondaryOutlined', 'secondaryContained', 'dangerPlain', 'dangerFlushed', 'dangerOutlined', 'dangerContained', 'successPlain', 'successFlushed', 'successOutlined', 'successContained'],
        componentsDetail: {
          primaryPlain: {
            selectedValue: 'Primary plain',
            size: constantProps.size.medium,
            variant: constantProps.variant.plain,
            children: Select__Example().props.children,
            color: constantProps.color.primary
          },
          primaryFlushed: {
            selectedValue: 'primary flushed',
            variant: constantProps.variant.flushed,
            children: Select__Example().props.children,
            color: constantProps.color.primary
          },
          primaryOutlined: {
            selectedValue: 'Primary Outlined ',
            size: constantProps.size.medium,
            variant: constantProps.variant.outlined,
            children: Select__Example().props.children,
            color: constantProps.color.primary
          },
          primaryContained: {
            selectedValue: 'Primary Contained',
            variant: constantProps.variant.contained,
            children: Select__Example().props.children,
            color: constantProps.color.primary
          },
          secondaryPlain: {
            selectedValue: 'Secondary plain',
            size: constantProps.size.medium,
            variant: constantProps.variant.plain,
            children: Select__Example().props.children,
            color: constantProps.color.secondary
          },
          secondaryFlushed: {
            selectedValue: 'Secondary flushed',
            variant: constantProps.variant.flushed,
            children: Select__Example().props.children,
            color: constantProps.color.secondary
          },
          secondaryOutlined: {
            selectedValue: 'Secondary Outlined ',
            size: constantProps.size.medium,
            variant: constantProps.variant.outlined,
            children: Select__Example().props.children,
            color: constantProps.color.secondary
          },
          secondaryContained: {
            selectedValue: 'Secondary Contained',
            variant: constantProps.variant.contained,
            children: Select__Example().props.children,
            color: constantProps.color.secondary
          },
          dangerPlain: {
            selectedValue: 'Danger plain',
            size: constantProps.size.medium,
            variant: constantProps.variant.plain,
            children: Select__Example().props.children,
            color: constantProps.color.danger
          },
          dangerFlushed: {
            selectedValue: 'Danger flushed',
            variant: constantProps.variant.flushed,
            children: Select__Example().props.children,
            color: constantProps.color.danger
          },
          dangerOutlined: {
            selectedValue: 'Danger Outlined ',
            size: constantProps.size.medium,
            variant: constantProps.variant.outlined,
            children: Select__Example().props.children,
            color: constantProps.color.danger
          },
          dangerContained: {
            selectedValue: 'Danger Contained',
            variant: constantProps.variant.contained,
            children: Select__Example().props.children,
            color: constantProps.color.danger
          },
          successPlain: {
            selectedValue: 'Success plain',
            size: constantProps.size.medium,
            variant: constantProps.variant.plain,
            children: Select__Example().props.children,
            color: constantProps.color.success
          },
          successFlushed: {
            selectedValue: 'Success flushed',
            variant: constantProps.variant.flushed,
            children: Select__Example().props.children,
            color: constantProps.color.success
          },
          successOutlined: {
            selectedValue: 'Success Outlined ',
            size: constantProps.size.medium,
            variant: constantProps.variant.outlined,
            children: Select__Example().props.children,
            color: constantProps.color.success
          },
          successContained: {
            selectedValue: 'Success Contained',
            variant: constantProps.variant.contained,
            children: Select__Example().props.children,
            color: constantProps.color.success
          }
        }
      },
      Sizes: {
        displayName: 'Sizes',
        description: 'The list of sizes based Buttons is shown',
        $decoratorItemClassName: style.fullwidth,
        componentsList: ['small', 'medium', 'large', 'xLarge', 'stretch'],
        componentsDetail: {
          small: {
            selectedValue: 'Small select',
            size: constantProps.size.small,
            children: Select__Example().props.children,
            variant: constantProps.variant.flushed
          },
          medium: {
            selectedValue: 'Medium select',
            size: constantProps.size.medium,
            children: Select__Example().props.children,
            variant: constantProps.variant.flushed
          },
          large: {
            selectedValue: 'Large select',
            size: constantProps.size.large,
            children: Select__Example().props.children,
            variant: constantProps.variant.contained
          },
          stretch: {
            selectedValue: 'Stretch select',
            size: constantProps.size.stretch,
            children: Select__Example().props.children,
            variant: constantProps.variant.outlined
          }
        }
      },
      Disabled: {
        displayName: 'States',
        description: 'highlight the Button text if its Disabled mode',
        componentsList: ['Disabled'],
        componentsDetail: {
          Disabled: {
            disabled: true,
            selectedValue: 'Disabled Select',
            children: Select__Example().props.children,
            variant: constantProps.variant.flushed
          }
        }
      },
      Accessibility: {
        displayName: 'Accessibility ',
        description: 'Accessibility related examples',
        componentsList: ['Accessibility'],
        componentsDetail: {
          Accessibility: {
            selectedValue: 'Accessibility select',
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            ariaLabel: 'Accessible Button',
            role: 'button',
            tabIndex: '1',
            ariaLabelledby: 'Button',
            ariaDisabled: 'false',
            ariaPressed: 'false',
            ariaHasPopup: 'true',
            ariaExpanded: 'false',
            ariaSelected: 'true',
            ariaControls: 'Button',
            autoFocus: 'true',
            focusClass: 'focusClass',
            children: Select__Example().props.children
          }
        }
      },
      CustomID: {
        displayName: 'Customization',
        description: 'Custom Id & ClassName related examples',
        componentsList: ['CustomId', 'CustomIdPrefix', 'customClass'],
        componentsDetail: {
          CustomIdPrefix: {
            selectedValue: 'Select',
            children: Select__ExampleCustomized().props.children,
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            customIdPrefix: 'a',
            customIdSuffix: 'b'
          },
          CustomId: {
            selectedValue: 'Select',
            children: Select__ExampleCustomized().props.children,
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            customId: 'submit'
          },
          customClass: {
            selectedValue: 'Select',
            children: Select__ExampleCustomized().props.children,
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            customStyle: {
              base: style.myColor
            }
          }
        }
      },
      tagAttributes: {
        displayName: 'Tag Attributes',
        description: 'Tag Attributes arethe attributes that are placed in the button tags',
        componentsList: ['Functionality'],
        componentsDetail: {
          Functionality: {
            selectedValue: 'Select',
            children: Select__Example().props.children,
            variant: constantProps.variant.flushed,
            size: constantProps.size.medium,
            tagAttributes: {
              triggerTagAttributes: {
                onMouseOver: e => {
                  console.log(e);
                },
                onMouseLeave: e => {
                  console.log(e.target);
                }
              },
              menuTagAttributes: {
                onMouseOver: e => {
                  console.log('menuProps', e);
                },
                onMouseLeave: e => {
                  console.log('leave', e.target);
                }
              }
            },
            tagGeneralAttributes: {
              triggerGeneralAttributes: {
                'data-test': 'trigger props'
              },
              menuGeneralAttributes: {
                'data-test': 'menu props'
              }
            }
          }
        }
      },
      Search: {
        displayName: 'Search',
        description: 'Select with search',
        componentsList: ['search'],
        componentType: components.SelectWithSearchExample,
        componentsDetail: {
          search: {
            children: SelectWithSearchExample().props.children,
            tagAttributes: {
              triggerTagAttributes: {
                onMouseOver: e => {
                  console.log(e);
                },
                onMouseLeave: e => {
                  console.log(e.target);
                }
              },
              menuTagAttributes: {
                onMouseOver: e => {
                  console.log('menuProps', e);
                },
                onMouseLeave: e => {
                  console.log('leave', e.target);
                }
              }
            },
            tagGeneralAttributes: {
              triggerGeneralAttributes: {
                'data-test': 'trigger props'
              },
              searchGeneralAttributes: {
                'data-search': 'Search props'
              },
              menuGeneralAttributes: {
                'data-test': 'menu props'
              }
            },
            customStyle: {
              base: style.myColor
            }
          }
        }
      },
      Section: {
        displayName: 'Section With Scroll',
        description: 'Select with Section',
        componentsList: ['section'],
        componentType: components.Select__scroll,
        componentsDetail: {
          section: {
            children: Select__scroll().props.children
          }
        }
      }
    }
  };
});