import * as React from "react";
import { Link } from "react-router-dom";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";
import DatePicker from "material-ui/DatePicker";
import Toggle from "material-ui/Toggle";
import MenuItem from "material-ui/MenuItem";
import DropDownMenu from "material-ui/DropDownMenu";

require("./styles.scss");

const style = {
  width: "100%"
};

interface Props {
  datasets: Array<any>;
  buyDataset: Function;
}

class BuyPage extends React.Component<Props> {
  public render() {
    const { props } = this;
    const { datasets, buyDataset } = props;
    return (
      <div className="buy-page">
        <h2>데이터셋 구매</h2>
        <ul>
          {datasets.map(dataset => (
            <li key={dataset.id}>
              <h3>데이터</h3>
              <p>{dataset.comment}</p>
              <h3>촬영 기종</h3>
              <p>{dataset.producer.model.name}</p>
              <h3>소유자</h3>
              <p>{dataset.producer.owner.email}</p>
              <hr />
              <RaisedButton
                label="구매"
                onClick={() => buyDataset(dataset.id)}
              />
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default BuyPage;