import React from 'react';
import { config, networkUtils } from '../../utils';
import Entity from './Entity';
import styled from 'styled-components';

const { api } = config;
const { fm } = api;

const Gallery = styled.div`
  width: 100%;
  max-width: 100%;
  //height: 210px;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  flex-flow: row;
  text-align: center;
  padding-bottom: 5px;
`;

class MediaGallery extends React.Component {
  constructor(props) {
    super(props);
    const { value } = this.props;
    this.state = {
      value: value || '',
      uploadedFileList: [],
    };
  }

  componentDidMount = () => {
    this.fetchData();
  };

  fetchData = () => {
    const { repo } = this.props;

    repo !== undefined && networkUtils.request({
      url: fm.list.replace('{repo}', repo),
      method: 'get',
    }).then((data) => {
      if (data.success) {
        this.setState({
          uploadedFileList: data.data,
        });
      } else {
        throw data;;
      }
    });
  };

  render() {
    const { uploadedFileList } = this.state;
    const { repo } = this.props;

    // console.log(uploadedFileList);

    return (
      <Gallery ref={node => this.gallery = node}>
        {uploadedFileList.length ? uploadedFileList.map(item =>
          <Entity
            key={`/repos/${repo}/${item.fileName}`}
            file={item}
            repo={repo}
          />) : <h4>暂无</h4>
        }
      </Gallery>
    );

  }
}

export default MediaGallery;
