import React from "react";
import lbry from "lbry.js";
import lbryuri from "lbryuri.js";
import Link from "component/link";
import { FormField } from "component/form.js";
import FileTile from "component/fileTile";
import rewards from "rewards.js";
import lbryio from "lbryio.js";
import { BusyMessage, Thumbnail } from "component/common.js";

class FileList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sortBy: "date",
    };

    this._sortFunctions = {
      date: function(fileInfos) {
        return fileInfos.slice().reverse();
      },
      title: function(fileInfos) {
        return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
          const title1 = fileInfo1.metadata
            ? fileInfo1.metadata.stream.metadata.title.toLowerCase()
            : fileInfo1.name;
          const title2 = fileInfo2.metadata
            ? fileInfo2.metadata.stream.metadata.title.toLowerCase()
            : fileInfo2.name;
          if (title1 < title2) {
            return -1;
          } else if (title1 > title2) {
            return 1;
          } else {
            return 0;
          }
        });
      },
      filename: function(fileInfos) {
        return fileInfos
          .slice()
          .sort(function({ file_name: fileName1 }, { file_name: fileName2 }) {
            const fileName1Lower = fileName1.toLowerCase();
            const fileName2Lower = fileName2.toLowerCase();
            if (fileName1Lower < fileName2Lower) {
              return -1;
            } else if (fileName2Lower > fileName1Lower) {
              return 1;
            } else {
              return 0;
            }
          });
      },
    };
  }

  handleSortChanged(event) {
    this.setState({
      sortBy: event.target.value,
    });
  }

  render() {
    const { handleSortChanged, fetching, fileInfos } = this.props;
    const { sortBy } = this.state;
    const content = [];

    this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
      const uri = lbryuri.build({
        contentName: fileInfo.name,
        channelName: fileInfo.channel_name,
      });
      content.push(
        <FileTile
          key={uri}
          uri={uri}
          hidePrice={true}
          showEmpty={this.props.fileTileShowEmpty}
        />
      );
    });
    return (
      <section className="file-list__header">
        {fetching && <span className="busy-indicator" />}
        <span className="sort-section">
          {__("Sort by")} {" "}
          <FormField type="select" onChange={this.handleSortChanged.bind(this)}>
            <option value="date">{__("Date")}</option>
            <option value="title">{__("Title")}</option>
            <option value="filename">{__("File name")}</option>
          </FormField>
        </span>
        {content}
      </section>
    );
  }
}

export default FileList;