import React from 'react';
import Page from './page';
import formatBytes from './format-bytes'
import Footer from './footer';

import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import {Tabs, Tab} from 'material-ui/Tabs';
import ActionInfo from 'material-ui/svg-icons/action/info';
import RaisedButton from 'material-ui/RaisedButton';
import FontIcon from 'material-ui/FontIcon';

import FileFolder from 'material-ui/svg-icons/file/folder';
import NoImage from './images/no-image-icon.png'

var moment = require('moment');
import RefreshIndicator from 'material-ui/RefreshIndicator';
let rating = require('./rating');
import LinearProgress from 'material-ui/LinearProgress';
import {fileTypeDetect} from './content'
import {contentIcon} from './torrent'

let buildFilesTree = (filesList) => {
	let rootTree = {
		__sizeBT: 0
	};
	filesList.forEach((file) => {
		let pathTree = file.path.split('/');
		let currentItem = rootTree;
		pathTree.forEach((pathItem) => {
			if(!(pathItem in currentItem)) 
			{
				currentItem[pathItem] = {
					__sizeBT: 0
				}
			}
			currentItem = currentItem[pathItem]
			currentItem.__sizeBT += file.size;
		})
		rootTree.__sizeBT += file.size;
	});
	return rootTree;
}

const treeToTorrentFiles = (tree) => {
	let arr = [];
	for(let file in tree)
	{
		if(file == '__sizeBT')
			continue;

		arr.push(<ListItem
			key={file}
			primaryText={file}
	        secondaryText={formatBytes(tree[file].__sizeBT)}
	        nestedItems={treeToTorrentFiles(tree[file])}
	        primaryTogglesNestedList={true}
	        innerDivStyle={{wordBreak: 'break-word'}}
	        leftIcon={tree[file] && Object.keys(tree[file]).length > 1 ? <FileFolder /> : contentIcon(fileTypeDetect({path: file}))}
		 />);
	}
	return arr;
}

const TorrentFiles = (props) => {
  let filesList = props.torrent.filesList;
	let tree = buildFilesTree(filesList);
	return (
		<List className='w100p'>
    {
      filesList.length > 0
      ?
      <div className='w100p'>
  			<Subheader inset={true}>Content of the torrent:</Subheader>
  			{treeToTorrentFiles(tree)}
      </div>
      :
      <div className='column center'>
        <span className='pad0-75'>Processing files...</span>
        <LinearProgress mode="indeterminate" />
      </div>
    }
		</List>
	);
};

const TorrentInformation = (props) => {
	let torrent = props.torrent;
	return (
		<List className='w100p'>
	      <Subheader inset={true}>Information about torrent</Subheader>
	      <ListItem
	        //leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Torrent Name"
	        secondaryText={<span className='break-word' style={{whiteSpace: 'normal'}}>{torrent.name}</span>}
	      />
	      <ListItem
	       // leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Torrent Size"
	        secondaryText={formatBytes(torrent.size)}
	      />
	      <ListItem
	       // leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Torrent contains files"
	        secondaryText={torrent.files}
	        onClick={() => {
	        	if(!props.parent)
	        		return

	        	props.parent.setState({
			      value: 'files'
			    })
	        }}
	      />
	      <ListItem
	       // leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Indexed/Added torrent date"
	        secondaryText={moment(torrent.added).format('MMMM Do YYYY, h:mm:ss')}
	      />
	       <ListItem
	       // leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Content type"
	        secondaryText={torrent.contentType || 'unknown'}
	      />
	      <ListItem
	       // leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
	        rightIcon={<ActionInfo />}
	        primaryText="Category"
	        secondaryText={torrent.contentCategory || 'unknown'}
	      />
	    </List>
	);
}

export default class TorrentPage extends Page {
  constructor(props) {
    super(props);
    this.state = {
      value: 'info',
      searchingIndicator: false,
      voting: false,
      voted: false,
    };
    this.setTitle('Information about torrent');
  }

  changeTab(tab) {
  	if(this.state.value != tab) {
	  	this.setState({
	      value: tab
	    });
  		console.log('change');
  	}
  }
  onSwipeRight() {
  	this.changeTab('files');
  }
  onSwipeLeft() {
  	this.changeTab('info');
  }

  handleChange = (value) => {
  	if(value == 'main') {
  		window.router('/');
  		return;
  	}

    this.setState({
      value: value,
    });
  };
  getTorrentInfo() {
  	window.torrentSocket.emit('torrent', this.props.hash, {files: true}, window.customLoader((data) => {
  		if(data) {
  			this.torrent = data
  			this.setTitle(this.torrent.name + ' - RatsOnTheBoat.org');
        if(this.torrent.contentCategory == 'xxx') {
          this.setMetaTag('robots', 'noindex');
        }
  			//this.forceUpdate(); // вызывается через searchingIndicator

  			// Получаем более новую статистику пира
  			if((new Date).getTime() - this.torrent.trackersChecked > 10 * 60 * 1000) {
  				window.torrentSocket.emit('checkTrackers', this.torrent.hash);
  			}
  		}
  	}, () => {
      this.setState({
        searchingIndicator: true
      });
    }, () => {
      this.setState({
        searchingIndicator: false
      });
    }));
  }
  componentDidMount() {
  	super.componentDidMount();

  	this.getTorrentInfo();
  	this.filesUpdated = (hash) => {
  		if(this.props.hash != hash)
      		return;

  		this.getTorrentInfo();
  	}
  	window.torrentSocket.on('filesReady', this.filesUpdated);

  	this.trackerUpdate = (info) => {
      if(this.props.hash != info.hash)
      	return;

      if(!this.torrent)
      	return;

      Object.assign(this.torrent, info);
      this.forceUpdate();
    }
    window.torrentSocket.on('trackerTorrentUpdate', this.trackerUpdate);

    this.onVote = ({hash, good, bad}) => {
      if(this.props.hash != hash)
        return;

      if(!this.torrent)
        return;

      this.torrent.good = good;
      this.torrent.bad = bad;
      this.forceUpdate();
    }
    window.torrentSocket.on('vote', this.onVote);
  }
  componentWillUnmount() {
  	if(this.filesUpdated)
      window.torrentSocket.off('filesReady', this.filesUpdated);
  	if(this.trackerUpdate)
      window.torrentSocket.off('trackerTorrentUpdate', this.trackerUpdate);
    if(this.onVote)
      window.torrentSocket.off('vote', this.onVote);
    if(this.torrent && this.torrent.contentCategory == 'xxx') {
      this.removeMetaTag('robots');
    }
  }
  vote(good) {
    if(!this.torrent)
      return;

    this.setState({
        voting: true
    });
    window.torrentSocket.emit('vote', this.torrent.hash, !!good, window.customLoader((success) => {
      this.setState({
        voted: true,
        voting: false
      });
    }));
  }
  render() {
  	const style = {
      refresh: {
        display: 'inline-block',
        position: 'relative',
      },
    };

    if(this.state.searchingIndicator) {
      return (
        <div className='pad1 w100p column center'>
          <RefreshIndicator
            size={50}
            left={0}
            top={0}
            loadingColor="#FF9800"
            status="loading"
            style={style.refresh}
          />
        </div>
      );
    }

    let torrentRating;
    if(this.torrent) {
      torrentRating = Math.round(rating(this.torrent.good, this.torrent.bad) * 100);
    }

    return (
      <div className="w100p column center">
      {
   			this.torrent
   			?
   			<Tabs
            className='w100p'
		        value={this.state.value}
		        onChange={this.handleChange}
		     >
		    	 <Tab label="Back to main" value="main" />
		     	<Tab label="Information" value="info" >
		     		<div className='column w100p'>
		     			<div className='row w100p torrent-information-row'>
		     				<div className='info-table'>
   								<TorrentInformation torrent={this.torrent} parent={this} />
   							</div>
   							<div style={{flexBasis: '40%'}} className='column center w100p'>
   								<img src={NoImage} className='pad0-75' style={{height: '200px'}} />
   								<RaisedButton
								      href={`magnet:?xt=urn:btih:${this.torrent.hash}`}
								      target="_self"
								      label="Download"
								      secondary={true}
								      icon={<svg fill='white' viewBox="0 0 24 24"><path d="M17.374 20.235c2.444-2.981 6.626-8.157 6.626-8.157l-3.846-3.092s-2.857 3.523-6.571 8.097c-4.312 5.312-11.881-2.41-6.671-6.671 4.561-3.729 8.097-6.57 8.097-6.57l-3.092-3.842s-5.173 4.181-8.157 6.621c-2.662 2.175-3.76 4.749-3.76 7.24 0 5.254 4.867 10.139 10.121 10.139 2.487 0 5.064-1.095 7.253-3.765zm4.724-7.953l-1.699 2.111-1.74-1.397 1.701-2.114 1.738 1.4zm-10.386-10.385l1.4 1.738-2.113 1.701-1.397-1.74 2.11-1.699z"/></svg>}
								    />
								 <div className='fs0-75 pad0-75 center column' style={{color: 'rgba(0, 0, 0, 0.541176)'}}><div>BTIH:</div><div>{this.torrent.hash}</div></div>
								 {
								 	this.torrent.seeders || this.torrent.leechers || this.torrent.completed
								 	?
								 	<div className='fs0-85 pad0-75 center column'>
								 		<div className='pad0-25' style={{color: '#00C853'}}>seeders: {this.torrent.seeders}</div>
								 		<div className='pad0-25' style={{color: '#AA00FF'}}>leechers: {this.torrent.leechers}</div>
								 		<div className='pad0-25' style={{color: '#FF6D00'}}>completed: {this.torrent.completed}</div>
								 	</div>
								 	:
								 	null
								 }
                 {
                   !this.state.voted && !this.state.voting
                   ?
                   <div className='row pad0-25'>
                     <RaisedButton
                        label={`Good (${this.torrent.good})`}
                        labelColor="white"
                        backgroundColor="#00C853"
                        icon={
                          <svg viewBox="0 0 489.543 489.543" fill="white">
                            <g>
                              <path d="M270.024,0c-22.6,0-15,48.3-15,48.3s-48.3,133.2-94.5,168.7c-9.9,10.4-16.1,21.9-20,31.3l0,0l0,0
                                c-0.9,2.3-1.7,4.5-2.4,6.5c-3.1,6.3-9.7,16-23.8,24.5l46.2,200.9c0,0,71.5,9.3,143.2,7.8c28.7,2.3,59.1,2.5,83.3-2.7
                                c82.2-17.5,61.6-74.8,61.6-74.8c44.3-33.3,19.1-74.9,19.1-74.9c39.4-41.1,0.7-75.6,0.7-75.6s21.3-33.2-6.2-58.3
                                c-34.3-31.4-127.4-10.5-127.4-10.5l0,0c-6.5,1.1-13.4,2.5-20.8,4.3c0,0-32.2,15,0-82.7C346.324,15.1,292.624,0,270.024,0z"/>
                              <path d="M127.324,465.7l-35-166.3c-2-9.5-11.6-17.3-21.3-17.3h-66.8l-0.1,200.8h109.1C123.024,483,129.324,475.2,127.324,465.7z"
                                />
                            </g>
                          </svg>
                        }
                        onClick={() => this.vote(true)}
                      />
                      <RaisedButton
                        style={{marginLeft: '9px'}}
                        label={`Bad (${this.torrent.bad})`}
                        labelColor="white"
                        backgroundColor="#D50000"
                        icon={
                          <svg viewBox="0 0 487.643 487.643" fill="white">
                          <g>
                            <path d="M113.869,209.443l46-200.1c0,0,71.2-9.3,142.6-7.8c28.5-2.3,58.9-2.5,83,2.7c81.9,17.4,61.4,74.5,61.4,74.5
                              c44.2,33.2,19,74.6,19,74.6c39.2,41,0.7,75.3,0.7,75.3s21.2,33-6.1,58c-34.2,31.2-126.9,10.5-126.9,10.5l0,0
                              c-6.4-1.1-13.3-2.5-20.7-4.2c0,0-32.1-15,0,82.4s-21.4,112.3-43.9,112.3s-15-48.1-15-48.1s-48.1-132.7-94.1-168
                              c-9.9-10.4-16.1-21.8-19.9-31.2l0,0l0,0c-0.9-2.3-1.7-4.5-2.4-6.5C134.469,227.543,127.869,217.843,113.869,209.443z
                               M70.869,206.643c9.7,0,19.2-7.7,21.2-17.2l34.8-165.6c2-9.5-4.3-17.2-14-17.2H4.169l0.1,200H70.869z"/>
                          </g>
                          </svg>
                        }
                        onClick={() => this.vote(false)}
                      />
                    </div>
                    :
                      this.state.voting
                      ?
                      <div>voting...</div>
                      :
                      <div>Thank you for voting!</div>
                }
                {
                  this.torrent.good > 0 || this.torrent.bad > 0
                  ?
                  <div className='w100p' style={{padding: '7px 35px', marginTop: '10px'}}>
                    <LinearProgress 
                      mode="determinate" 
                      value={torrentRating}
                      color={torrentRating >= 50 ? '#00E676' : '#FF3D00'}
                      style={{
                        height: '5px',
                      }}
                    />
                    <div className='row center pad0-75 fs0-85' style={{color: torrentRating >= 50 ? '#00E676' : '#FF3D00'}}>Torrent rating: {torrentRating}%</div>
                  </div>
                  :
                  null
                }
   							</div>
   						</div>
   					</div>
   				</Tab>
   				<Tab label="Files" value="files" >
   					<TorrentFiles torrent={this.torrent} />
   				</Tab>
   			</Tabs>
   			:
   			null
      }
      	<Footer />
      </div>
    );
  }
}