import React from 'react';
import decorationStyles from '@zohodesk/docs/es/docsviewer/DocsViewer.module.css';
import DecoratorComponent from '@zohodesk/docs/es/docsviewer/DecoratorComponent';
import textConstants from '../Text.constantProps';
import Text from '../Text';
import imgUrl from '../../../images/text.png';
import getDocIcon, { docsIcons } from '../../docsIcons';
import styles from './Text.model.decorator.module.css';
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Text component',
      imgUrl: imgUrl,
      description: 'Text Components prpvide a natural and familier way to indicate the inforamtion,allowing the users to choose more than one variant at a time.'
    },
    tabsList: ['Default', 'Colors', 'TextEllipsis', 'TextWrap', 'TextWeight', 'TextAlign', 'TextDirection', 'TextAdjustment', 'TagName', 'Size', 'Transform', 'Heading', 'Type', 'Decoration', 'DecorationColor', 'IconSupport', 'Indent', 'TagAttributeProps', 'Children', 'customStyle'],
    tabsDetail: {
      Default: {
        displayName: 'Default Text',
        description: 'The Text is displayed',
        componentsList: ['default'],
        componentsDetail: {
          default: {
            content: 'Lorem Ipsum is simply dummy'
          }
        }
      },
      TextEllipsis: {
        displayName: 'Text Ellipsis',
        description: 'The Text ellipsis is a method to display the overflow property',
        componentsList: ['overflow'],
        $decoratorListClassName: decorationStyles.dec_justify_start,
        $decoratorItemClassName: decorationStyles.dec_item_quarterwidth,
        componentsDetail: {
          overflow: {
            textEllipsis: true,
            content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text"
          }
        }
      },
      TextWrap: {
        displayName: 'Text Wrap',
        description: 'The Text Wrap is used for wrap the words in sentence',
        componentsList: ['wrap'],
        componentsDetail: {
          wrap: {
            wordWrap: true,
            content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text"
          }
        }
      },
      TextWeight: {
        displayName: 'Text Weight',
        description: 'The Text weight is given based on  user centric values',
        componentsList: ['xs', 'sm', 'md', 'lg', 'xl', 'bold', 'normal', 'lighter'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          xs: {
            content: 'font-weight : xs',
            weight: textConstants.weight.xSmall
          },
          sm: {
            content: 'font-weight : sm',
            weight: textConstants.weight.small
          },
          md: {
            content: 'font-weight : md',
            weight: textConstants.weight.medium
          },
          lg: {
            content: 'font-weight : lg',
            weight: textConstants.weight.large
          },
          xl: {
            content: 'font-weight : xl',
            weight: textConstants.weight.xLarge
          },
          bold: {
            content: 'font-weight : bold',
            weight: textConstants.weight.bold
          },
          normal: {
            content: 'font-weight : normal',
            weight: textConstants.weight.normal
          },
          lighter: {
            content: 'font-weight : lighter',
            weight: textConstants.weight.lighter
          }
        }
      },
      TextAlign: {
        displayName: 'Text Alignment',
        description: 'The Text is aligned based of the position',
        componentsList: ['Left', 'Right', 'Center'],
        $decoratorListClassName: decorationStyles.dec_column,
        $decoratorItemClassName: decorationStyles.dec_item_fullwidth,
        componentsDetail: {
          Left: {
            content: 'Alignment text left',
            align: textConstants.align.left,
            auto: true
          },
          Right: {
            content: 'Alignment text right',
            align: textConstants.align.right,
            auto: true
          },
          Center: {
            content: 'Alignment text center',
            align: textConstants.align.center,
            auto: true
          }
        }
      },
      TextAdjustment: {
        displayName: 'Text Adjustment',
        description: 'The Text width adjustment based of parent area',
        componentsList: ['auto', 'stretch'],
        $decoratorListClassName: decorationStyles.dec_column,
        $decoratorItemClassName: decorationStyles.dec_item_fullwidth,
        componentsDetail: {
          auto: {
            content: 'Auto text Content 2',
            auto: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => /*#__PURE__*/React.createElement(DecoratorComponent, {
              isNoTagWrapping: true
            }, /*#__PURE__*/React.createElement("span", {
              className: `${decorationStyles.dec_flex} ${decorationStyles.dec_item_quarterwidth}`
            }, "Text content 1"), component),
            customStyle: {
              base: styles.border_area
            }
          },
          stretch: {
            content: 'Stretch text content',
            stretch: true,
            customStyle: {
              base: styles.border_area
            }
          }
        }
      },
      TextDirection: {
        displayName: 'Text Direction',
        description: 'The Text direction based of input',
        componentsList: ['horizontal', 'vertical'],
        $decoratorListClassName: decorationStyles.dec_column,
        $decoratorItemClassName: decorationStyles.dec_item_fullwidth,
        componentsDetail: {
          horizontal: {
            content: ' Horizontal Content',
            startIcon: getDocIcon(docsIcons.addLink),
            endIcon: getDocIcon(docsIcons.addLink),
            direction: textConstants.direction.horizontal
          },
          vertical: {
            content: ' Vertical Content',
            startIcon: getDocIcon(docsIcons.addLink),
            direction: textConstants.direction.vertical
          }
        }
      },
      TagName: {
        displayName: 'Custom Tag Name',
        description: 'the TagName defines the text to be rendered in given tags',
        componentsList: ['heading', 'div', 'p', 'span', 'a'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          heading: {
            tagName: 'h4',
            content: 'Tag Name : H4'
          },
          div: {
            tagName: 'div',
            content: 'Tag Name : Div'
          },
          p: {
            tagName: 'p',
            content: 'Tag Name : P'
          },
          span: {
            tagName: 'span',
            content: 'Tag Name : Span'
          },
          a: {
            tagName: 'a',
            content: 'Tag Name :A'
          }
        }
      },
      Size: {
        displayName: 'Text sizes',
        description: 'The size defines the font size of the text',
        componentsList: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          xs: {
            content: 'xsmall size content',
            size: textConstants.size.xsmall
          },
          sm: {
            content: 'small size content',
            size: textConstants.size.small
          },
          md: {
            content: 'medium size content',
            size: textConstants.size.medium
          },
          lg: {
            content: 'lg size content',
            size: textConstants.size.large
          },
          xl: {
            content: 'xl size content',
            size: textConstants.size.xlarge
          },
          xxl: {
            content: 'xxl size content',
            size: textConstants.size.xxlarge
          }
        }
      },
      Transform: {
        displayName: 'Text Transform',
        description: 'The Transform property dentes the whethet the text is in case',
        componentsList: ['uc', 'lc', 'capitalize'],
        componentsDetail: {
          uc: {
            content: 'text-transform:uppercase',
            transform: 'uppercase'
          },
          lc: {
            content: 'text-transform:lowercase',
            transform: 'lowercase'
          },
          capitalize: {
            content: 'text-transform:capitalize',
            transform: 'capitalize'
          }
        }
      },
      Type: {
        displayName: 'Text Types',
        description: 'the Type defines the type of text of available',
        componentsList: ['heading', 'blockquote', 'paragraph'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          heading: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level1'
          },
          blockquote: {
            content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
            type: 'blockquote'
          },
          paragraph: {
            content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
            type: 'paragraph'
          }
        }
      },
      Heading: {
        displayName: 'Heading',
        description: 'the Heading defines the type of heading of available',
        componentsList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          h1: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level1'
          },
          h2: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level2'
          },
          h3: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level3'
          },
          h4: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level4'
          },
          h5: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level5'
          },
          h6: {
            content: 'Lorem Ipsum is simply dummy',
            type: 'heading',
            level: 'level6'
          }
        }
      },
      Colors: {
        displayName: 'Colors',
        description: 'The Text can be displayed in available colors',
        componentsList: ['dK', 'success', 'info', 'danger', 'light', 'gray', 'hL', 'white', 'default', 'primary', 'secondary'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          dk: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.darknight
          },
          success: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.success
          },
          info: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.info
          },
          danger: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.danger
          },
          light: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.lighter
          },
          gray: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.grayness
          },
          hL: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.highlight
          },
          white: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.whiteness
          },
          default: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.default
          },
          primary: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.primary
          },
          secondary: {
            content: 'Lorem Ipsum is simply dummy',
            color: textConstants.color.secondary
          }
        }
      },
      Decoration: {
        displayName: 'Decoration',
        description: 'the decoration can be any of three of available',
        componentsList: ['ul', 'ol', 'st'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          ul: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine
          },
          ol: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.overLine
          },
          st: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.lineThrough
          }
        }
      },
      DecorationColor: {
        displayName: 'Decoration Color',
        description: 'the decoration color can be any these of available',
        componentsList: ['dK', 'success', 'info', 'danger', 'light', 'gray', 'hL', 'white'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          dk: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.darknight
          },
          success: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.success
          },
          info: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.info
          },
          danger: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.danger
          },
          light: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.lighter
          },
          gray: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.grayness
          },
          hL: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.highlight
          },
          white: {
            content: 'Lorem Ipsum is simply dummy',
            decoration: textConstants.decoration.underLine,
            decorationColor: textConstants.decorationColor.whiteness
          }
        }
      },
      IconSupport: {
        displayName: 'Icon Support',
        description: 'the text icon can be used for icon followed by text places',
        componentsList: ['startIcon', 'endIcon'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          startIcon: {
            content: 'Lorem Ipsum is simply dummy',
            startIcon: getDocIcon(docsIcons.addLink)
          },
          endIcon: {
            content: 'Lorem Ipsum is simply dummy',
            endIcon: getDocIcon(docsIcons.addLink)
          }
        }
      },
      Indent: {
        displayName: 'Indent',
        description: 'the indent can  be any of three of available',
        componentsList: ['sm', 'md', 'lg'],
        $decoratorListClassName: decorationStyles.dec_column,
        componentsDetail: {
          sm: {
            content: 'Lorem Ipsum is simply dummy',
            indent: textConstants.indent.small,
            tagName: 'div'
          },
          md: {
            content: 'Lorem Ipsum is simply dummy',
            indent: textConstants.indent.medium,
            tagName: 'div'
          },
          lg: {
            content: 'Lorem Ipsum is simply dummy',
            indent: textConstants.indent.large,
            tagName: 'div'
          }
        }
      },
      TagAttributeProps: {
        displayName: 'HTML Tag Attributes',
        description: 'the tag Attribute props defines the attributes that can be directly given to the tag',
        componentsList: ['example1'],
        componentsDetail: {
          example1: {
            content: 'Lorem Ipsum is simply dummy text',
            tagGeneralAttributes: {
              title: 'testing'
            },
            tagAttributes: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      },
      Children: {
        displayName: 'Children',
        description: 'the children defines the child nodes that are directly given to the tag',
        componentsList: ['example1'],
        componentsDetail: {
          example1: {
            children: /*#__PURE__*/React.createElement("span", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.", /*#__PURE__*/React.createElement(Text, {
              decoration: textConstants.decoration.underLine,
              decorationColor: textConstants.decorationColor.info,
              content: "Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut."
            }))
          }
        }
      },
      customStyle: {
        displayName: 'Customization',
        description: 'the Custom Class Name defines the classnames that can be directly given to the component',
        componentsList: ['Custom'],
        componentsDetail: {
          Custom: {
            content: 'Lorem Ipsum is simply dummy',
            customStyle: {
              base: styles.customStyle123
            },
            customIdPrefix: 'customText'
          }
        }
      }
    }
  };
});