import React from 'react';
import constantsProps from '../Textarea.constantProps';
import imgUrl from '../../../images/textarea.png';
import { TextareaControlledExample } from './Textarea.example1';
import style from './Textarea.custom.module.css';
export default ((themeName, components) => {
  return {
    header: {
      title: 'Textarea Component',
      imgUrl: imgUrl,
      description: 'The Textarea component represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.'
    },
    tabsList: ['Basic', 'Variants', 'Color', 'Size', 'Resize', 'Animated Mode', 'State', 'UnControlled', 'Controlled', 'customId'],
    tabsDetail: {
      Basic: {
        displayName: 'Basic Usage',
        description: 'The following example shows a very simple textarea, with a set numbers of rows and columns and some default content and minimum and maximum number of characters.',
        componentsList: ['basic', 'defaultValue', 'rows', 'minMax'],
        componentType: components.Textarea,
        componentsDetail: {
          basic: {
            placeholder: 'Textarea placeholder...'
          },
          defaultValue: {
            value: 'Textarea value'
          },
          rows: {
            placeholder: 'Textarea placeholder...',
            rows: 4,
            cols: 35
          },
          minMax: {
            minLength: 10,
            maxLength: 20,
            placeholder: 'Try to type more then 20 characters'
          }
        }
      },
      Variants: {
        displayName: 'Variants',
        description: 'The following example shows a list of variants.',
        componentsList: ['outline', 'flushed', 'filled', 'plain'],
        componentType: components.TextareaControlled,
        componentsDetail: {
          outline: {
            variant: constantsProps.variant.outline,
            placeholder: 'Outline',
            size: constantsProps.size.medium
          },
          flushed: {
            variant: constantsProps.variant.flushed,
            placeholder: 'Flushed Variant',
            size: constantsProps.size.medium
          },
          filled: {
            variant: constantsProps.variant.filled,
            placeholder: 'Filled Variant',
            size: constantsProps.size.medium
          },
          plain: {
            variant: constantsProps.variant.plain,
            placeholder: 'Plain Variant',
            size: constantsProps.size.medium
          }
        }
      },
      Color: {
        displayName: 'Color',
        description: 'The following example shows a list of color variants.',
        componentsList: ['default', 'primary', 'danger'],
        componentsDetail: {
          default: {
            variant: constantsProps.variant.outline,
            placeholder: 'Default color..',
            color: constantsProps.color.default,
            size: constantsProps.size.medium
          },
          primary: {
            variant: constantsProps.variant.outline,
            placeholder: 'Primary color..',
            color: constantsProps.color.primary,
            size: constantsProps.size.medium
          },
          danger: {
            variant: constantsProps.variant.outline,
            placeholder: 'Danger color..',
            color: constantsProps.color.danger,
            size: constantsProps.size.medium
          }
        }
      },
      Size: {
        displayName: 'Size',
        description: 'The following example shows a list of size variant.',
        componentsList: ['Small', 'Medium', 'Large'],
        componentsDetail: {
          Small: {
            variant: constantsProps.variant.flushed,
            size: constantsProps.size.small,
            placeholder: 'Small size...',
            color: constantsProps.color.primary
          },
          Medium: {
            variant: constantsProps.variant.flushed,
            size: constantsProps.size.medium,
            color: constantsProps.color.primary,
            placeholder: 'Medium size...'
          },
          Large: {
            variant: constantsProps.variant.flushed,
            size: constantsProps.size.large,
            color: constantsProps.color.primary,
            placeholder: 'Large size...'
          }
        }
      },
      Resize: {
        displayName: 'Resize',
        description: "You'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly change resize behaviour shows here.",
        componentsList: ['none', 'horizontal', 'vertical', 'both'],
        componentsDetail: {
          none: {
            resize: constantsProps.resize.none,
            placeholder: 'Resize none...',
            size: constantsProps.size.medium
          },
          horizontal: {
            resize: constantsProps.resize.horizontal,
            placeholder: 'Resize horizontal...'
          },
          vertical: {
            resize: constantsProps.resize.vertical,
            placeholder: 'Resize vertical...',
            size: constantsProps.size.medium
          },
          both: {
            resize: constantsProps.resize.both,
            placeholder: 'Resize both...'
          }
        }
      },
      'Animated Mode': {
        displayName: 'Animated On Focus Mode',
        description: 'The following example shows a animate on focus mode in textarea componnet while focused.',
        componentsList: ['animated_md', 'animated_lg'],
        componentType: components.TextareaControlled,
        componentsDetail: {
          animated_md: {
            size: constantsProps.size.medium,
            variant: constantsProps.variant.flushed,
            placeholder: 'Animate on cursor foucs time...',
            animateOnFocus: true
          },
          animated_lg: {
            size: constantsProps.size.large,
            variant: constantsProps.variant.filled,
            placeholder: 'Animate on cursor foucs time...',
            animateOnFocus: true
          }
        }
      },
      State: {
        displayName: 'State',
        description: 'The following example shows a list of state like disabled,readonly and required of textarea componnet.',
        componentsList: ['disabled', 'readonly', 'required'],
        componentType: components.TextareaControlled,
        componentsDetail: {
          disabled: {
            size: constantsProps.size.medium,
            value: "I'm a disabled textarea component..",
            disabled: true
          },
          readonly: {
            size: constantsProps.size.medium,
            variant: constantsProps.variant.filled,
            readOnly: true,
            value: "I'm a readOnly textarea component.."
          },
          required: {
            size: constantsProps.size.medium,
            placeholder: 'Required State filed...',
            required: true
          }
        }
      },
      UnControlled: {
        displayName: 'UnControlled Component',
        description: "A Uncontrolled textarea you have to 'pull and Push' the value from the field when you need it.",
        componentsList: ['unControlled'],
        componentType: components.Textarea,
        componentsDetail: {
          unControlled: {
            variant: constantsProps.variant.flushed,
            color: constantsProps.color.primary,
            defaultValue: 'Textarea content',
            onChange: (value, ev) => {
              console.log('controlled Example --> ', value);
            }
          }
        }
      },
      Controlled: {
        displayName: 'Controlled Component',
        description: 'A controlled textarea accepts its current defaultValue as a prop, as well as a callback to change that value.',
        componentsList: ['Controlled'],
        componentType: components.TextareaControlled,
        componentsDetail: {
          Controlled: {
            $decorator: function ControlledDecorator() {
              return /*#__PURE__*/React.createElement(TextareaControlledExample, null);
            }
          }
        }
      },
      customId: {
        displayName: 'Customization',
        description: 'The following example shows a list of variants.',
        componentsList: ['customId', 'className'],
        componentType: components.TextareaControlled,
        componentsDetail: {
          customId: {
            customId: 'form_description',
            name: 'text uncontrolled',
            id: 'form_description'
          },
          className: {
            customClassName: {
              base: style.custom_base,
              variant: style.custom_bg
            },
            value: 'Textarea content'
          }
        }
      }
    }
  };
});