import React from 'react';
import decorationStyles from '@zohodesk/docs/es/docsviewer/DocsViewer.module.css';
import DecoratorComponent from '@zohodesk/docs/es/docsviewer/DecoratorComponent';
import styles from './Tag.model.decorator.module.css';
import imgUrl from '../../../images/badge.png';
import constantProps from '../Tag.constantProps';
import Text from '../../text/Text';
import TextConstantProps from '../../text/Text.constantProps';
import getDocIcon, { docsIcons } from '../../docsIcons';
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Tag Component',
      imgUrl,
      description: 'Tags scale to match the size of the immediate parent element by using relative font sizing and em units'
    },
    tabsList: ['variants', 'colors', 'ellipsis', 'sizes', 'shape', 'icon', 'children', 'disabled', 'CustomStyle', 'Tag Attributes', 'accessibility'],
    tabsDetail: {
      variants: {
        displayName: 'Variants',
        description: 'The Tag can be any of the two available Variants.',
        componentsList: ['default', 'primary', 'primarycontained'],
        // $decorator : (component) => {
        //   return <DecoratorComponent className={styles.displayInlineBlock}>{component}</DecoratorComponent>
        // },
        // $decorateComponentItem: (component) => {
        //   return <DecoratorComponent className={styles.displayInlineBlock}>{component}</DecoratorComponent>
        // },
        componentsDetail: {
          default: {
            text: 'Default Tag',
            title: 'Default Tag'
          },
          primary: {
            text: 'Tag Outlined',
            variant: constantProps.variant.outlined,
            color: constantProps.color.primary,
            size: constantProps.size.medium,
            title: 'Tag Outlined' // $decorator : (component) => {
            //   return <DecoratorComponent className={styles.displayInline}>{component}</DecoratorComponent>
            // }

          },
          primarycontained: {
            text: 'Tag Contained',
            variant: constantProps.variant.contained,
            color: constantProps.color.primary,
            size: constantProps.size.medium,
            title: 'Tag Contained'
          }
        }
      },
      colors: {
        displayName: 'Colors',
        description: 'The Tag can be available with these colors and variants',
        componentsList: ['default', 'primary', 'primarycontained', 'secondary', 'secondaryfilled', 'success', 'successfilled', 'danger', 'dangerfilled'],
        // $decorator : (component) => {
        //   return <DecoratorComponent className={styles.displayInlineBlock}>{component}</DecoratorComponent>
        // },
        // $decorateComponentItem: (component) => {
        //   return <DecoratorComponent className={styles.displayInlineBlock}>{component}</DecoratorComponent>
        // },
        componentsDetail: {
          default: {
            text: 'Default Tag',
            title: 'Default Tag'
          },
          primary: {
            text: 'Primary Tag',
            variant: constantProps.variant.outlined,
            color: constantProps.color.primary,
            size: constantProps.size.medium,
            title: 'Primary Tag' // $decorator : (component) => {
            //   return <DecoratorComponent className={styles.displayInline}>{component}</DecoratorComponent>
            // }

          },
          primarycontained: {
            text: 'Primary Tag',
            variant: constantProps.variant.contained,
            color: constantProps.color.primary,
            size: constantProps.size.medium,
            title: 'Primary Tag'
          },
          secondary: {
            text: 'Secondary Tag',
            variant: constantProps.variant.outlined,
            color: constantProps.color.secondary,
            size: constantProps.size.medium,
            title: 'Secondary Tag'
          },
          secondaryfilled: {
            text: 'Secondary Tag',
            variant: constantProps.variant.contained,
            color: constantProps.color.secondary,
            size: constantProps.size.medium,
            title: 'Secondary Tag'
          },
          success: {
            text: 'Success Tag',
            variant: constantProps.variant.outlined,
            color: constantProps.color.success,
            size: constantProps.size.medium,
            title: 'Success Tag'
          },
          successfilled: {
            text: 'Success Tag',
            variant: constantProps.variant.contained,
            color: constantProps.color.success,
            size: constantProps.size.medium,
            title: 'Success Tag'
          },
          danger: {
            text: 'Danger Tag',
            variant: constantProps.variant.outlined,
            color: constantProps.color.danger,
            size: constantProps.size.medium,
            title: 'Danger Tag'
          },
          dangerfilled: {
            text: 'Danger Tag',
            variant: constantProps.variant.contained,
            color: constantProps.color.danger,
            size: constantProps.size.medium,
            title: 'Danger Tag'
          }
        }
      },
      ellipsis: {
        displayName: 'Ellipsis',
        description: 'The Tag with ellipsis support',
        componentsList: ['ellipsis'],
        componentsDetail: {
          ellipsis: {
            text: 'Tag with ellipsis support ',
            variant: constantProps.variant.contained,
            size: constantProps.size.medium,
            title: 'Ellipsis variant',
            textEllipsis: true,
            $decoratorClassName: styles.wid500
          }
        }
      },
      sizes: {
        displayName: 'Sizes',
        description: 'The tag can be any of the five available size versions.',
        componentsList: ['small', 'medium', 'large', 'xlarge', 'stretch'],
        componentsDetail: {
          small: {
            text: 'Small Tag',
            size: constantProps.size.small
          },
          medium: {
            text: 'Medium Tag',
            size: constantProps.size.medium
          },
          large: {
            text: 'Large Tag',
            size: constantProps.size.large
          },
          xlarge: {
            text: 'XLarge Tag',
            size: constantProps.size.xlarge
          },
          stretch: {
            text: 'Stretch Tag',
            size: constantProps.size.stretch,
            $decoratorClassName: decorationStyles.dec_last_item_fullwidth
          }
        }
      },
      shape: {
        displayName: 'Shape',
        description: 'The tag can be any of the three available shapes.',
        componentsList: ['rounded', 'oval', 'rectangle'],
        componentsDetail: {
          rounded: {
            text: 'Rounded Tag',
            size: constantProps.size.medium
          },
          oval: {
            text: 'Oval Tag',
            size: constantProps.size.medium,
            shape: constantProps.shape.oval
          },
          rectangle: {
            text: 'square Tag',
            size: constantProps.size.medium,
            shape: constantProps.shape.square
          }
        }
      },
      icon: {
        displayName: 'Icon',
        description: 'The tag component with start & end icon support.',
        componentsList: ['startIcon', 'endIcon', 'startEndIcon'],
        componentsDetail: {
          startIcon: {
            text: 'Tag',
            startIcon: getDocIcon(docsIcons.addLink)
          },
          endIcon: {
            text: 'Tag',
            endIcon: getDocIcon(docsIcons.addLink)
          },
          startEndIcon: {
            text: 'Tag',
            startIcon: getDocIcon(docsIcons.addLink),
            endIcon: getDocIcon(docsIcons.shareLink)
          }
        }
      },
      children: {
        displayName: 'Children Support',
        description: 'The tag with one component passed as children',
        componentsList: ['children'],
        componentsDetail: {
          children: {
            children: /*#__PURE__*/React.createElement(Text, {
              content: "Children using <Text/>",
              size: TextConstantProps.size.xxLarge,
              transform: TextConstantProps.transform.upperCase,
              weight: TextConstantProps.weight.bold,
              align: TextConstantProps.align.right
            })
          }
        }
      },
      disabled: {
        displayName: 'Disabled',
        description: 'The tag with disabled state',
        componentsList: ['primary disabled', 'primaryFilled disabled'],
        componentsDetail: {
          'primary disabled': {
            text: 'Disabled Primary Tag',
            variant: constantProps.variant.outlined,
            disabled: true
          },
          'primaryFilled disabled': {
            text: 'Disabled Primaryfilled Tag',
            disabled: true
          }
        }
      },
      CustomStyle: {
        displayName: 'CustomStyle',
        description: 'The tag with CustomStyle support',
        componentsList: ['CustomStyle'],
        componentsDetail: {
          CustomStyle: {
            text: 'CustomStyle Tag',
            ariaLabel: 'CustomStyle Tag',
            role: 'tag',
            tabIndex: 1,
            customIdPrefix: 'prefix',
            customIdSuffix: 'suffix',
            customStyle: {
              color_primary: styles.colorGreen,
              var_contained: styles.customContained
            }
          }
        }
      },
      'Tag Attributes': {
        displayName: 'Tag Attributes',
        description: 'The tag with custom Attributes support',
        componentsList: ['Tag Attributes'],
        componentsDetail: {
          'Tag Attributes': {
            text: 'Tag Attributes Tag',
            ariaLabel: 'Tag Attributes Tag',
            role: 'tag',
            tabIndex: 1,
            customIdPrefix: 'prefix',
            customIdSuffix: 'suffix',
            tagGeneralAttributes: {
              title: 'Testing tag Attributes'
            },
            tagAttributes: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      },
      accessibility: {
        displayName: 'Accessibility',
        description: 'The tag with accessibility support',
        componentsList: ['accessibility'],
        componentsDetail: {
          accessibility: {
            text: 'Accessibility Tag',
            ariaLabel: 'Accessible Tag',
            role: 'tag',
            tabIndex: 1,
            customIdPrefix: 'prefix',
            customIdSuffix: 'suffix'
          }
        }
      }
    }
  };
});