"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsSection = void 0;

var _preact = require("preact");

var _section = _interopRequireDefault(require("./section"));

var _componentCode = _interopRequireDefault(require("./component-code"));

var _2 = require("../");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

const tabItems = [{
  label: 'One',
  name: 'one',
  icon: 'search'
}, {
  label: 'Two',
  name: 'two',
  icon: null
}, {
  label: 'Three',
  name: 'three',
  icon: null
}, {
  label: 'Something Longer',
  name: 'four',
  icon: null
}];

class TabsSection extends _preact.Component {
  constructor(props) {
    super(props);
    this.selectTab = this.selectTab.bind(this);
    this.state = {
      activeTab: 'one'
    };
  }

  selectTab(name) {
    this.setState({
      activeTab: name
    });
  }

  render(_, {
    activeTab
  }) {
    const processedTabs = tabItems.map(tab => {
      return _objectSpread(_objectSpread({}, tab), {}, {
        active: activeTab === tab.name
      });
    });
    return (0, _preact.h)("div", null, (0, _preact.h)(_section.default, {
      title: "Tabs"
    }, (0, _preact.h)(_componentCode.default, {
      name: "Tabs",
      code: "const tabItems = [\n  { label: 'One', name: 'one', icon: 'search', active: true, iconColor: 'dark-blue', text-color: 'red' },\n  { label: 'Two', name: 'two', icon: null },\n  { label: 'Three', name: 'three', icon: null }\n]\n<Tabs\n  className=\"bg-near-white\"\n  tabs={tabItems}\n  updateSelectedTab={this.selectTab}\n/>"
    }), (0, _preact.h)(_2.Tabs, {
      className: "bg-near-white",
      tabs: processedTabs,
      updateSelectedTab: this.selectTab
    }), (0, _preact.h)("div", {
      className: "w5 mt3"
    }, (0, _preact.h)(_2.Tabs, {
      className: "bg-black-05",
      vertical: true,
      tabs: processedTabs,
      updateSelectedTab: this.selectTab
    })), (0, _preact.h)("div", {
      className: "w-100 mt3"
    }, (0, _preact.h)(_2.Tabs, {
      tabs: processedTabs,
      updateSelectedTab: this.selectTab
    }))), (0, _preact.h)(_2.Tabs, {
      className: "bg-white shadow-1 mw7 center",
      standalone: true,
      tabs: processedTabs,
      updateSelectedTab: this.selectTab
    }));
  }

}

exports.TabsSection = TabsSection;