import * as React from "react";
import { Link } from "react-router-dom";
import { List, ListItem } from "material-ui/List";
import Avatar from "material-ui/Avatar";

require("./styles.scss");

interface Props {
  user: any;
  history: any;
}

class UserPage extends React.Component<Props> {
  public render() {
    const { user, history } = this.props;
    console.log(this.props);
    return (
      <div className="my-page">
        <h2>내 페이지</h2>
        <h3>드론 목록</h3>
        <List>
          {user.drones.map(drone => (
            <ListItem
              key={drone.id}
              primaryText={`${drone.name} (${drone.model.name})`}
              leftAvatar={
                <Avatar src={`/assets/img/${drone.model.name}.jpg`} />
              }
            />
          ))}
        </List>
        <h3>허가서 목록</h3>
        <List>
          {user.contracts.map(contract => (
            <ListItem
              key={contract.id}
              primaryText={`${contract.reason} (${contract.drone.name})`}
              leftAvatar={
                <Avatar src={`/assets/img/${contract.drone.model.name}.jpg`} />
              }
              onClick={() => history.push(`/contract/${contract.id}`)}
            />
          ))}
        </List>
        <h3>구매한 데이터셋</h3>
        <ul>
          {user.datasets.map(dataset => (
            <li key={dataset.id}>
              <h4>데이터</h4>
              <p>{dataset.comment}</p>
              <h4>촬영한 드론</h4>
              <p>{dataset.producer.name}({dataset.producer.model.name})</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default UserPage;