import constantProps from '../Datebox.constantProps';
import imgUrl from '../../../../images/button.png'; //import decorationStyles from "@zohodesk/docs/es/docsviewer/DocsViewer.module.css";

export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Datebox Component',
      imgUrl: imgUrl,
      description: 'Use the Datebox component to select the date'
    },
    tabsList: ['shapes', 'Colors', 'Sizes', 'active', 'Disabled', 'CustomID', 'Accessibility', 'tagAttributes'],
    tabsDetail: {
      shapes: {
        displayName: 'Shapes',
        description: 'The list of Shapes is shown',
        componentsList: ['circle', 'square'],
        componentsDetail: {
          circle: {
            isActive: true,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle
          },
          square: {
            isActive: true,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.square
          }
        }
      },
      Colors: {
        displayName: 'Colors',
        description: 'The Colors based Datebox is shown',
        componentsList: ['primary', 'secondary', 'dark', 'danger', 'dangerSecondary'],
        componentsDetail: {
          primary: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.primary
          },
          secondary: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.secondary
          },
          dark: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.dark
          },
          danger: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.danger
          },
          dangerSecondary: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.dangerSecondary
          }
        }
      },
      Sizes: {
        displayName: 'Sizes',
        description: 'The list of sizes based Datebox is shown',
        componentsList: ['sm', 'md', 'lg'],
        componentsDetail: {
          sm: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.small,
            shape: constantProps.shape.circle,
            color: constantProps.color.primary
          },
          md: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            color: constantProps.color.primary
          },
          lg: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.large,
            shape: constantProps.shape.circle,
            color: constantProps.color.primary
          }
        }
      },
      active: {
        displayName: 'Active',
        description: 'The list of active state is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle
          },
          active: {
            isActive: true,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.square
          }
        }
      },
      Disabled: {
        displayName: 'Disabled',
        description: 'The list of Disabled is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            color: constantProps.color.danger,
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            disabled: true
          },
          active: {
            isActive: true,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            color: constantProps.color.dangerSecondary,
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            disabled: true
          }
        }
      },
      customId: {
        displayName: 'Shapes',
        description: 'The list of Shapes is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            customId: `dateSelected`,
            size: constantProps.size.medium,
            shape: constantProps.shape.circle
          },
          active: {
            isActive: true,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            customId: `dateSelected`,
            size: constantProps.size.medium,
            shape: constantProps.shape.circle
          }
        }
      },
      Accessibility: {
        displayName: 'Accessibility',
        description: 'The list of Accessibility props is shown',
        componentsList: ['a11y'],
        componentsDetail: {
          a11y: {
            isActive: false,
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            ariaLabel: '24-7-2021',
            role: 'datebox'
          }
        }
      },
      tagAttributes: {
        displayName: 'Tag Attributes',
        description: 'Tag Attributes arethe attributes that are placed in the datebox component tags',
        componentsList: ['Functionality'],
        componentsDetail: {
          Functionality: {
            handleSelect: () => {},
            incremday: '24',
            userSeeMonth: '7',
            userSeeYear: '2021',
            size: constantProps.size.medium,
            shape: constantProps.shape.circle,
            tagAttributeProps: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      }
    }
  };
});