import React from 'react';
import DecoratorComponent from '@zohodesk/docs/es/docsviewer/DecoratorComponent';
import boxConstants from '../Box.constantProps';
import styles from './Box__default.module.css';
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Layout Component',
      imgUrl: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fs3-eu-west-1.amazonaws.com%2Fclickclickclick.click%2Fimages%2FOG.png&imgrefurl=https%3A%2F%2Fclickclickclick.click%2F&tbnid=xH9kAyM9XmncKM&vet=12ahUKEwjsg7GjsdTzAhXCTCsKHenEAmQQMygLegUIARDvAQ..i&docid=z0NHgidacKbePM&w=944&h=944&q=button%20click&ved=2ahUKEwjsg7GjsdTzAhXCTCsKHenEAmQQMygLegUIARDvAQ',
      description: 'use the layout component to align the widgets'
    },
    tabsList: ['spacing', 'alignSelf', 'column', 'align' // 'alignContent',
    // 'direction',
    // 'justifyContent',
    // 'scroll',
    // 'wrap'
    ],
    tabsDetail: {
      spacing: {
        displayName: 'Box Spacing',
        description: 'The Spacing of box is shown',
        componentsList: ['none', 'xSmall', 'small', 'medium', 'large', 'xLarge'],
        // eslint-disable-next-line react/display-name
        $decorator: component => {
          return /*#__PURE__*/React.createElement(DecoratorComponent, {
            className: styles.containment
          }, component);
        },
        componentsDetail: {
          none: {
            spacing: boxConstants.spacing.none,
            children: 'Box spacing - none',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          },
          xSmall: {
            spacing: boxConstants.spacing.xSmall,
            children: 'Box spacing - xSmall',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          },
          small: {
            spacing: boxConstants.spacing.small,
            children: 'Box spacing - small',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          },
          medium: {
            spacing: boxConstants.spacing.medium,
            children: 'Box spacing - medium',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          },
          large: {
            spacing: boxConstants.spacing.large,
            children: 'Box spacing - large',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          },
          xLarge: {
            spacing: boxConstants.spacing.xLarge,
            children: 'Box spacing - xLarge',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          }
        }
      },
      alignSelf: {
        displayName: 'Box alignSelf',
        description: 'The self align varieties of box is shown',
        componentsList: ['start', 'end', 'center'],
        // eslint-disable-next-line react/display-name
        $decorator: component => {
          return /*#__PURE__*/React.createElement(DecoratorComponent, {
            className: styles.container
          }, component);
        },
        componentsDetail: {
          start: {
            alignSelf: boxConstants.alignSelf.start,
            children: 'Box alignSelf - start',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.aself
              }, component);
            }
          },
          end: {
            alignSelf: boxConstants.alignSelf.end,
            children: 'Box alignSelf - end',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.aself
              }, component);
            }
          },
          center: {
            alignSelf: boxConstants.alignSelf.center,
            children: 'Box alignSelf - center',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.aself
              }, component);
            }
          }
        }
      },
      align: {
        displayName: ' Align',
        description: 'The align props is used to align its children',
        componentsList: ['horizontal', 'vertical', 'both', 'top', 'bottom', 'baseline'],
        // eslint-disable-next-line react/display-name
        $decorator: component => {
          return /*#__PURE__*/React.createElement(DecoratorComponent, {
            className: styles.content
          }, component);
        },
        componentsDetail: {
          horizontal: {
            children: 'Box as align horizontal',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.horizontal
          },
          vertical: {
            children: 'Box as align vertical',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.vertical
          },
          both: {
            children: 'Box as align both',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.both
          },
          top: {
            children: 'Box as align top',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.top
          },
          bottom: {
            children: 'Box as align bottom',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.bottom
          },
          baseline: {
            children: 'Box as align baseline',
            isContainer: true,
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.cover
              }, component);
            },
            align: boxConstants.align.baseline
          }
        }
      },
      column: {
        displayName: 'Box column',
        description: 'The layout is divided into 12 columns as shown',
        componentsList: ['col_1', 'col_2', 'col_3', 'col_4', 'col_5', 'col_6', 'col_7', 'col_8', 'col_9', 'col_10', 'col_11', 'col_12'],
        // eslint-disable-next-line react/display-name
        $decorator: component => {
          return /*#__PURE__*/React.createElement(DecoratorComponent, {
            className: styles.container
          }, console.log(component));
        },
        componentsDetail: {
          col_1: {
            column: boxConstants.column['1'],
            children: 'Box column - 1',
            // eslint-disable-next-line react/display-name
            $decorator: component => {
              return /*#__PURE__*/React.createElement(DecoratorComponent, {
                className: styles.content
              }, component);
            }
          } // col_2: {
          //     column:boxConstants.column['2'],
          //     children:'Box column - 2',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },
          // col_3: {
          //     column:boxConstants.column['3'],
          //     children:'Box column - 3',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },
          // col_4: {
          //     column:boxConstants.column['4'],
          //     children:'Box column - 4',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_5: {
          //     column:boxConstants.column['5'],
          //     children:'Box column - 5',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_6: {
          //     column:boxConstants.column['6'],
          //     children:'Box column - 6',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_7: {
          //     column:boxConstants.column['7'],
          //     children:'Box column - 7',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_8: {
          //     column:boxConstants.column['8'],
          //     children:'Box column - 8',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_9: {
          //     column:boxConstants.column['9'],
          //     children:'Box column - 9',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_10: {
          //     column:boxConstants.column['10'],
          //     children:'Box column - 10',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_11: {
          //     column:boxConstants.column['11'],
          //     children:'Box column - 11',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },col_12: {
          //     column:boxConstants.column['12'],
          //     children:'Box column - 12',
          //     decorator : (component)=>{
          //         return <DecoratorComponent className={styles.content}>{component}</DecoratorComponent>
          //     },
          // },

        }
      }
    }
  };
});