import _ from "lodash";
import React from "react";
import {
  ExpansionList,
  ExpansionPanel as RMDExpansionPanel,
  FontIcon,
} from "react-md";
import style from "./style";

/**
 * Expansion panels contain content and allow lightweight editing of an element.
 * @param {object} props The props
 * @returns {function} The component
 */

const ExpansionPanel = (props) => {
  const Label = () => {
    if (props.icon !== undefined) {
      return (
        <div>
          <FontIcon
            style={{
              ...props.style,
              width: 25,
              top: 7,
              position: "relative",
              display: "inline-block",
            }}
          >
            {props.icon}
          </FontIcon>
          <span style={{ display: "inline-block", padding: 15 }}>
            {props.label}
          </span>
        </div>
      );
    }

    return <span>{props.label}</span>;
  };

  return (
    <ExpansionList>
      <RMDExpansionPanel
        defaultExpanded={_.get(props, "isExpanded", false)}
        footer={_.get(props, "footer", null)}
        label={<Label />}
        style={{ ...style, ...props.style }}
        onExpandToggle={_.get(props, "onExpandToggle", () => null)}
      >
        <div style={{ paddingTop: 20 }}>{props.children}</div>
      </RMDExpansionPanel>
    </ExpansionList>
  );
};

ExpansionPanel.defaultProps = {
  label: "Untitled",
  defaultExpanded: false,
};

export default ExpansionPanel;