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: 'Year Component',
      imgUrl: imgUrl,
      description: 'Use the Year component to select the year'
    },
    tabsList: ['Default', 'Disabled', 'CustomID', 'Accessibility', 'tagAttributes'],
    tabsDetail: {
      Default: {
        displayName: 'Default',
        description: 'The default Year is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            year: '2021'
          },
          active: {
            year: '2022',
            isActive: true
          }
        }
      },
      Disabled: {
        displayName: 'Disabled',
        description: 'The Disabled is shown',
        componentsList: ['active'],
        componentsDetail: {
          active: {
            year: '2021',
            disabled: true
          }
        }
      },
      CustomID: {
        displayName: 'CustomId',
        description: 'The list of CustomId is shown',
        componentsList: ['act'],
        componentsDetail: {
          act: {
            year: '2021',
            customId: {
              year: 'july'
            }
          }
        }
      },
      Accessibility: {
        displayName: 'Accessibility',
        description: 'The list of Accessibility props is shown',
        componentsList: ['a11y'],
        componentsDetail: {
          a11y: {
            year: '2021',
            ariaLabel: 'year',
            role: 'year-2021'
          }
        }
      },
      tagAttributes: {
        displayName: 'Tag Attributes',
        description: 'Tag Attributes arethe attributes that are placed in the datebox component tags',
        componentsList: ['Functionality'],
        componentsDetail: {
          Functionality: {
            year: '2021',
            tagAttributeProps: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      }
    }
  };
});