import React from 'react';
import PropTypes from 'prop-types'
import fs from 'fs'
import classNames from 'classnames';

import {Flexbox, RetinaImg} from 'nylas-component-kit';
import {Actions, PreferencesUIStore, Utils} from 'nylas-exports';


class PreferencesTabItem extends React.Component {
  static displayName = 'PreferencesTabItem';

  static propTypes = {
    selection: PropTypes.shape({
      accountId: PropTypes.string,
      tabId: PropTypes.string,
    }).isRequired,
    tabItem: PropTypes.instanceOf(PreferencesUIStore.TabItem).isRequired,
  }

  _onClick = () => {
    Actions.switchPreferencesTab(this.props.tabItem.tabId);
  }

  _onClickAccount = (event, accountId) => {
    Actions.switchPreferencesTab(this.props.tabItem.tabId, {accountId});
    event.stopPropagation();
  }

  render() {
    const {selection, tabItem} = this.props
    const {tabId, displayName} = tabItem;
    const classes = classNames({
      item: true,
      active: tabId === selection.tabId,
    });

    let path = `icon-preferences-${displayName.toLowerCase().replace(" ", "-")}.png`
    if (!fs.existsSync(Utils.imageNamed(path))) {
      path = "icon-preferences-general.png";
    }
    const icon = (
      <RetinaImg
        className="tab-icon"
        name={path}
        mode={RetinaImg.Mode.ContentPreserve}
      />
    );

    return (
      <div className={classes} onClick={this._onClick}>
        {icon}
        <div className="name">{displayName}</div>
      </div>
    );
  }

}


class PreferencesTabsBar extends React.Component {
  static displayName = 'PreferencesTabsBar';

  static propTypes = {
    tabs: PropTypes.array.isRequired,
    selection: PropTypes.shape({
      accountId: PropTypes.string,
      tabId: PropTypes.string,
    }).isRequired,
  }

  renderTabs() {
    return this.props.tabs.map((tabItem) =>
      <PreferencesTabItem
        key={tabItem.tabId}
        tabItem={tabItem}
        selection={this.props.selection}
      />
    );
  }

  render() {
    return (
      <div className="container-preference-tabs">
        <Flexbox direction="row" className="preferences-tabs">
          <div style={{flex: 1}} />
          {this.renderTabs()}
          <div style={{flex: 1}} />
        </Flexbox>
      </div>
    );
  }

}

export default PreferencesTabsBar;