import React from 'react';
import PropTypes from 'prop-types';
import { CapTopBar, CapHeading } from '@capillarytech/cap-ui-library';
import { CAP_SPACE_24 } from '@capillarytech/cap-ui-library/styled/variables';
import { intlShape, injectIntl } from 'react-intl';
import messages from './messages';
const drawerPlacement = 'left';
const DEFAULT_MODULE = 'creatives';

const TopBar = (props) => {
  const {
    productsList,
    selectedProduct,
    handleProductChange,
    proxyOrgList,
    selectedOrg,
    handleOrgChange,
    topbarMenuData,
    handleTopbarMenuChange,
    dropdownMenuProps,
    topbarIcons,
    showDocumentationBot,
    intl,
    } = props;
  return (
    <CapTopBar
      drawerListProps={{
        productsList,
        selectedProduct,
        handleProductChange,
        title: (
          <CapHeading type="h5" style={{ margin: `${CAP_SPACE_24} 0` }}>
            {intl.formatMessage(messages.selectProduct)}
          </CapHeading>
      ),
        closable: false,
        placement: drawerPlacement,
        width: 320,
      }}
      selectProps={{
        items: proxyOrgList,
        selectedItem: selectedOrg,
        handleItemChange: handleOrgChange,
        selectPlaceholder: intl.formatMessage(messages.selectOrganization),
        showSearch: true,
        showHeader: true,
        title: intl.formatMessage(messages.selectOrganization),
        placeholder: intl.formatMessage(messages.organization),
        noResultText: intl.formatMessage(messages.noResultText),
      }}
      menuProps={{
        items: topbarMenuData,
        defaultSelectedKeys: [DEFAULT_MODULE],
        onMenuItemClick: handleTopbarMenuChange,
      }}
      dropdownMenuProps={dropdownMenuProps}
      topbarIcons={topbarIcons}
      showDocumentationBot={showDocumentationBot}
  />
  );
};

TopBar.propTypes = {
  productsList: PropTypes.array,
  selectedProduct: PropTypes.string,
  handleProductChange: PropTypes.func,
  proxyOrgList: PropTypes.array,
  selectedOrg: PropTypes.number,
  handleOrgChange: PropTypes.func,
  topbarMenuData: PropTypes.array,
  handleTopbarMenuChange: PropTypes.func,
  topbarIcons: PropTypes.array,
  dropdownMenuProps: PropTypes.array,
  showDocumentationBot: PropTypes.bool,
  intl: intlShape.isRequired,
};
export default injectIntl(TopBar);
