// When there are more properties in cookies object such as extra or path,
      // We will pass the object to display these extra information
      if (Object.keys(obj).length > 2) {
        map[obj.name] = Object.assign({}, obj);
        delete map[obj.name].name;
      } else {
        map[obj.name] = obj.value;
      }
      return map;
    }, Object.create(null));

    // To have different roots for Request and Response cookies
    return { [title]: cookies };
  }

  /**
   * Custom rendering method passed to PropertiesView. It's
   * responsible to filter out level 0 node in the tree
   *
   * @param {object} props
   */
  renderRow(props) {
    const { level } = props.member;

    if (level === 0) {
      return null;
    }

    return TreeRow(props);
  }

  /**
   * Get the selected cookies path
   *
   * @param {object} searchResult
   * @returns {string}
   */
  getTargetCookiePath(searchResult) {
    if (!searchResult) {
      return null;
    }

    switch (searchResult.type) {
      case "requestCookies": {
        return `/${REQUEST_COOKIES}/${searchResult.label}`;
      }
      case "responseCookies":
        return `/${RESPONSE_COOKIES}/${searchResult.label}`;
    }

    return null;
  }

  render() {
    let {
      request: {
        requestCookies = { cookies: [] },
        responseCookies = { cookies: [] },
      },
      targetSearchResult,
    } = this.props;

    const { filterText } = this.state;

    requestCookies = requestCookies.cookies || requestCookies;
    responseCookies = responseCookies.cookies || responseCookies;

    if (!requestCookies.length && !responseCookies.length) {
      return div({ className: "empty-notice" }, COOKIES_EMPTY_TEXT);
    }

    const items = [];

    if (responseCookies.length) {
      items.push({
        component: PropertiesView,
        componentProps: {
          object: sortObjectKeys(
            this.getProperties(responseCookies, RESPONSE_COOKIES)
          ),
          filterText,
          targetSearchResult,
          defaultSelectFirstNode: false,
          selectPath: this.getTargetCookiePath,
          renderRow: this.renderRow,
        },
        header: RESPONSE_COOKIES,
        id: "responseCookies",
        opened: true,
      });
    }

    if (requestCookies.length) {
      items.push({
        component: PropertiesView,
        componentProps: {
          object: sortObjectKeys(
            this.getProperties(requestCookies, REQUEST_COOKIES)
          ),
          filterText,
          targetSearchResult,
          defaultSelectFirstNode: false,
          selectPath: this.getTargetCookiePath,
          renderRow: this.renderRow,
        },
        header: REQUEST_COOKIES,
        id: "requestCookies",
        opened: true,
      });
    }

    return div(
      { className: "panel-container cookies-panel-container" },
      div(
        { className: "devtools-toolbar devtools-input-toolbar" },
        SearchBox({
          delay: FILTER_SEARCH_DELAY,
          type: "filter",
          onChange: text => this.setState({ filterText: text }),
          placeholder: COOKIES_FILTER_TEXT,
        })
      ),
      Accordion({ items })
    );
  }
}

module.exports = CookiesPanel;
PK