import React from 'react';
import textBoxConstants from '../TextBox.constantProps';
import imgUrl from '../../../images/text.png';
import { TextBoxControlledExample } from './TextBox.example';
import style from './TextBox.model.decorator.module.css';
import decorationStyles from '@zohodesk/docs/es/docsviewer/DocsViewer.module.css';
import getDocIcon, { docsIcons } from '../../docsIcons';

var TextBoxControlledDocsExample = () => {
  return /*#__PURE__*/React.createElement(TextBoxControlledExample, null);
};

export default ((themeName, components) => {
  return {
    header: {
      title: 'Let users to provide inputs with various types',
      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: ['Variants', 'Color', 'Type', 'Shape', 'Size', 'States', 'IconSupport', 'UnControlled', 'Controlled', 'Customizations'],
    tabsDetail: {
      Variants: {
        displayName: 'Variants',
        description: 'The list of variant is shown here',
        componentsList: ['outlined', 'flushed', 'filled', 'plain'],
        componentsDetail: {
          outlined: {
            variant: textBoxConstants.variant.outlined,
            size: textBoxConstants.size.medium,
            placeholder: 'Outlined Variant'
          },
          flushed: {
            variant: textBoxConstants.variant.flushed,
            size: textBoxConstants.size.medium,
            placeholder: 'Flushed Variant'
          },
          filled: {
            variant: textBoxConstants.variant.filled,
            placeholder: 'Filled Variant'
          },
          plain: {
            variant: textBoxConstants.variant.plain,
            placeholder: 'Plain Variant',
            autoFocus: true
          }
        }
      },
      Color: {
        displayName: 'Color',
        description: 'The list of color variant is shown here',
        componentsList: ['primary', 'secondary', 'danger'],
        componentsDetail: {
          primary: {
            variant: textBoxConstants.variant.outlined,
            size: textBoxConstants.size.medium,
            placeholder: 'Primary color',
            color: textBoxConstants.color.primary
          },
          secondary: {
            variant: textBoxConstants.variant.flushed,
            size: textBoxConstants.size.medium,
            placeholder: 'Secondary color',
            color: textBoxConstants.color.secondary
          },
          danger: {
            variant: textBoxConstants.variant.flushed,
            size: textBoxConstants.size.medium,
            placeholder: 'Danger color',
            color: textBoxConstants.color.danger
          }
        }
      },
      Type: {
        displayName: 'Type',
        description: 'The list of types of input tag is shown here',
        componentsList: ['text', 'number', 'email', 'password', 'url', 'search'],
        componentsDetail: {
          text: {
            color: textBoxConstants.color.primary,
            size: textBoxConstants.size.medium,
            placeholder: 'Text type...'
          },
          number: {
            type: textBoxConstants.type.number,
            size: textBoxConstants.size.medium,
            placeholder: 'Number type...'
          },
          email: {
            type: textBoxConstants.type.email,
            color: textBoxConstants.color.secondary,
            size: textBoxConstants.size.medium,
            placeholder: 'Email type...'
          },
          password: {
            type: textBoxConstants.type.password,
            color: textBoxConstants.color.secondary,
            size: textBoxConstants.size.medium,
            placeholder: 'Password type...',
            variant: textBoxConstants.variant.plain
          },
          url: {
            type: textBoxConstants.type.url,
            size: textBoxConstants.size.medium,
            placeholder: 'URL type...'
          },
          search: {
            type: textBoxConstants.type.search,
            color: textBoxConstants.color.primary,
            size: textBoxConstants.size.medium,
            placeholder: 'Search type...',
            variant: textBoxConstants.variant.flushed
          }
        }
      },
      Shape: {
        displayName: 'Shape',
        description: 'The list of shapes of input tag is shown here',
        componentsList: ['Square', 'Oval', 'RoundCorner'],
        componentsDetail: {
          Square: {
            color: textBoxConstants.color.primary,
            size: textBoxConstants.size.medium,
            shape: textBoxConstants.shape.square,
            placeholder: 'Square shape...'
          },
          Oval: {
            type: textBoxConstants.type.number,
            shape: textBoxConstants.shape.oval,
            placeholder: 'Oval shape...'
          },
          RoundCorner: {
            type: textBoxConstants.type.number,
            shape: textBoxConstants.shape.roundedCorner,
            placeholder: 'Round Corner shape...'
          }
        }
      },
      Size: {
        displayName: 'Size',
        description: 'The list of sizes of input tag is shown here',
        componentsList: ['Small', 'Medium', 'Large', 'xLarge', 'Stretch'],
        componentsDetail: {
          Small: {
            color: textBoxConstants.color.primary,
            size: textBoxConstants.size.small,
            placeholder: 'Small size...'
          },
          Medium: {
            type: textBoxConstants.type.number,
            size: textBoxConstants.size.medium,
            placeholder: 'Medium size...'
          },
          Large: {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.email,
            size: textBoxConstants.size.large,
            placeholder: 'Large size...'
          },
          xLarge: {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.email,
            size: textBoxConstants.size.xLarge,
            placeholder: 'XLarge size...'
          },
          Stretch: {
            color: textBoxConstants.color.secondary,
            type: textBoxConstants.type.password,
            size: textBoxConstants.size.stretch,
            $decoratorClassName: decorationStyles.dec_last_item_fullwidth,
            placeholder: 'Stretch size...'
          }
        }
      },
      States: {
        displayName: 'States',
        description: 'The list of states like disabled, active of input tag is shown here',
        componentsList: ['Disabled', 'Readonly', 'Required'],
        componentsDetail: {
          Disabled: {
            size: textBoxConstants.size.small,
            placeholder: 'Am in Disabled state...',
            value: 'Am in Disabled state...',
            disabled: true
          },
          Readonly: {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.text,
            active: true,
            placeholder: 'Am in Readonly state...',
            value: 'Am in Readonly state...',
            readonly: true
          },
          Required: {
            color: textBoxConstants.color.secondary,
            type: textBoxConstants.type.email,
            active: true,
            placeholder: 'Am in Required state...',
            required: true
          }
        }
      },
      IconSupport: {
        displayName: 'IconSupport',
        description: 'The input tag with icons is shown here',
        componentsList: ['Left', 'Right', 'Left Right'],
        componentsDetail: {
          Left: {
            size: textBoxConstants.size.small,
            type: textBoxConstants.type.text,
            placeholder: 'Left Icon...',
            startIcon: getDocIcon(docsIcons.addLink)
          },
          Right: {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.text,
            placeholder: 'Right Icon...',
            endIcon: getDocIcon(docsIcons.addLink)
          },
          'Left Right': {
            color: textBoxConstants.color.secondary,
            type: textBoxConstants.type.email,
            active: true,
            placeholder: 'Left Right Icon state...',
            startIcon: getDocIcon(docsIcons.addLink),
            endIcon: getDocIcon(docsIcons.addLink)
          }
        }
      },
      UnControlled: {
        displayName: 'UnControlled Component',
        description: "A Uncontrolled textbox you have to 'pull and Push' the value from the field when you need it.",
        componentsList: ['unControlled'],
        componentType: components.TextBox,
        componentsDetail: {
          unControlled: {
            variant: textBoxConstants.variant.flushed,
            color: textBoxConstants.color.primary,
            value: 'Textarea content',
            onChange: (value, ev) => {
              console.log('controlled Example --> ', value);
            }
          }
        }
      },
      Controlled: {
        displayName: 'Controlled Component',
        description: 'A controlled textbox accepts its current defaultValue as a prop, as well as a callback to change that value.',
        componentsList: ['Controlled'],
        componentType: components.TextBoxControlled,
        componentsDetail: {
          Controlled: {
            $decorator: TextBoxControlledDocsExample
          }
        }
      },
      Customizations: {
        displayName: 'Customizations',
        description: 'The input tag with customizations like custom id, custom class are shown here',
        componentsList: ['Custom ID', 'Custom Class', 'Tag Attributes'],
        componentsDetail: {
          'Custom ID': {
            size: textBoxConstants.size.medium,
            type: textBoxConstants.type.text,
            placeholder: 'Custom ID',
            customIdPrefix: 'textType',
            customIdSuffix: '1'
          },
          'Custom Class': {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.text,
            variant: textBoxConstants.variant.filled,
            placeholder: 'Custom Class',
            customStyle: {
              base: style.custom_base,
              filled: style.custom_bg
            },
            value: 'Custom Class'
          },
          'Tag Attributes': {
            color: textBoxConstants.color.primary,
            type: textBoxConstants.type.text,
            variant: textBoxConstants.variant.filled,
            placeholder: 'Tag Attributes',
            value: 'Tag Attributes',
            tagGeneralAttributes: {
              title: 'testing tag attributes'
            },
            tagAttributes: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      }
    }
  };
});