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

import { dateFormat } from '../../dateTimeFormat';
let monthNamesData = dateFormat().monthNames;
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Month Component',
      imgUrl: imgUrl,
      description: 'Use the Datebox component to select the date'
    },
    tabsList: ['Default', 'Active', 'Disabled', 'CustomID', 'Accessibility', 'tagAttributes'],
    tabsDetail: {
      Default: {
        displayName: 'Default',
        description: 'The default month is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            month: 6,
            onClick: () => {},
            isActive: false,
            displayText: 'july',
            monthNamesData
          }
        }
      },
      Active: {
        displayName: 'Active',
        description: 'The Active is shown',
        componentsList: ['act'],
        componentsDetail: {
          act: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData
          }
        }
      },
      Disabled: {
        displayName: 'Disabled',
        description: 'The Disabled is shown',
        componentsList: ['act', 'active'],
        componentsDetail: {
          act: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData,
            disabled: true
          },
          active: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData,
            disabled: true
          }
        }
      },
      CustomID: {
        displayName: 'CustomId',
        description: 'The list of CustomId is shown',
        componentsList: ['act'],
        componentsDetail: {
          act: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData,
            customId: {
              month: 'july'
            }
          }
        }
      },
      Accessibility: {
        displayName: 'Accessibility',
        description: 'The list of Accessibility props is shown',
        componentsList: ['a11y'],
        componentsDetail: {
          a11y: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData,
            ariaLabel: 'July',
            role: 'Month-july,year-2021'
          }
        }
      },
      tagAttributes: {
        displayName: 'Tag Attributes',
        description: 'Tag Attributes arethe attributes that are placed in the datebox component tags',
        componentsList: ['Functionality'],
        componentsDetail: {
          Functionality: {
            month: 6,
            onClick: () => {},
            isActive: true,
            displayText: 'july',
            monthNamesData,
            tagAttributeProps: {
              onMouseOver: e => {
                console.log(e);
              },
              onMouseLeave: e => {
                console.log(e.target);
              }
            }
          }
        }
      }
    }
  };
});