import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import moment from 'moment/min/moment.min'
import util from '../util'

const fieldSet = util.fieldSet(new Set(['name', 'date', 'size']))

export const FileList = props => {
  const {
    files,
    fields, sort, title,
    linkFiles,
    onClick, onClickParent, onDelete,
    groupDirectories, parentDirectory,
    orderBy='name asc',
    className='',
    fileListClassName='filelist',
    rowClassName='row file',
    options,
  } = props
  const { mapFn, sortFn } = util.sort.orderByFn(orderBy)
  let sortedFiles = (files || [])
    .filter(f => !!f)
    .map(mapFn)
    .sort(sortFn)
  if (groupDirectories) {
    const groupedFiles = sortedFiles.reduce((a,b) => { a[b[1].dir].push(b); return a }, { true: [], false: [] })
    sortedFiles = groupedFiles.true.concat(groupedFiles.false)
  }
  const fileFields = fieldSet(fields)
  let thumbnails = null
  if (fileFields.has('thumbnail')) {
    thumbnails = (
      <div class='thumbnails'>
        {sortedFiles.map(pair => (
          <div>
            <img src={pair[1].url} />
          </div>
        ))}
      </div>
    )
  }
  const fileList = sortedFiles.map(pair => {
      return <FileRow
        file={pair[1]}
        fields={fileFields}
        className={rowClassName}
        linkFiles={linkFiles}
        onDelete={onDelete}
        onClick={onClick}
        options={options}
      />
    })
  if (!fileList || !fileList.length) {
    return (
      <div className={'rows ' + className}>
        <div className='row heading'>
          <h4 className='noFiles'>No files</h4>
        </div>
      </div>
    )
  }
  // console.log(files)
  return (
    <div className={'rows ' + className}>
      {title &&
        <div className='row heading'>
          <h3>{title}</h3>}
        </div>
      }

	  	<div className={'rows ' + fileListClassName}>
        {parentDirectory && 
          <div className={rowClassName + ' parent'}>
            <div className="filename" title="Parent Directory">
              <span className='link' onClick={(e) => onClickParent && onClickParent(e)}>
                <i>Parent Directory</i>
              </span>
            </div>
          </div>
        }
        {thumbnails}
	  		{fileList}
      </div>
  	</div>
	)
}

export const FileRow = props => {
  const { file, linkFiles, onDelete, onClick, className='row file', username='', options } = props
  const fields = fieldSet(props.fields)

  const size = util.hush_size(file.size)
  const date = file.date || file.created_at
  const epoch = file.epoch || file.epochs || 0
  const count = file.count || 0

  let name;
  let key;
  if (file.name) {
    name = file.name
    key = name
  } else if (file.url) {
    if (file.opt && file.opt.type) {
      name = file.opt.type + ': ' + file.opt.title
      key = file.opt.token
    }
    else {
      name = file.url.replace(/^https?:\/\//, '')
      key = name
    }
  }

  return (
    <div className={className} key={key}>
      {fields.has('name') &&
        <div className="filename" title={file.name || file.url}>
          {file.persisted === false
            ? <span className='unpersisted'>{name}</span>
            : (linkFiles && file.url)
            ? <a target='_blank' onClick={(e) => { if (!(e.metaKey || e.ctrlKey || e.altKey) && onClick) { e.preventDefault(); onClick && onClick(file, e) }}} href={file.url}>{name}</a>
            : <span className='link' onClick={(e) => onClick && onClick(file, e)}>{name}</span>
          }
        </div>
      }
      {fields.has('age') &&
        <div className={"age " + util.carbon_date(date)}>{util.get_age(date)}</div>
      }
      {fields.has('username') &&
        <div className={"username"}>{username}</div>
      }
      {fields.has('epoch') &&
        <div className={"epoch " + util.hush_null(epoch)[0]}>{epoch > 0 ? 'ep. ' + epoch : ''}</div>
      }
      {fields.has('date') &&
        <div className={"date " + util.carbon_date(date)} title={moment(date).format("YYYY-MM-DD HH:mm")}>{moment(date).format("YYYY-MM-DD")}</div>
      }
      {fields.has('datetime') &&
        <div className={"datetime"}>
          <span class={'date ' + util.carbon_date(date)}>
            {moment(date).format("YYYY-MM-DD")}
          </span>
          <span class={'time ' + util.carbon_time(date)}>
            {moment(date).format("H:mm")}
          </span>
        </div>
      }
      {fields.has('size') &&
        <div className={"size " + size[0]}>{size[1]}</div>
      }
      {fields.has('count') &&
        <div className={"count " + util.hush_null(count)[0]}>{count > 0 ? count + ' files' : ''}</div>
      }
      {(fields.has('activity') || fields.has('module')) &&
        <div className='activity'>
          {fields.has('activity') && file.activity}
          {fields.has('module') && file.module}
        </div>
      }
      {fields.has('delete') && onDelete && file.id &&
        <div className='destroy' onClick={(e) => onDelete(file)}>x</div>
      }
      {fields.has('deleteLink') && onDelete && file.id &&
        <div className='destroyLink' onClick={(e) => onDelete(file)}>Delete</div>
      }
      {options && props.options(file)}
    </div>
  )
}