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

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

export const FileList = props => {
  const {
    files,
    fields, sort, title,
    linkFiles, onClick, onDelete,
    orderBy='name asc',
    className='',
    fileListClassName='filelist',
    rowClassName='row file'
  } = props
  const { mapFn, sortFn } = util.sort.orderByFn(orderBy)
  const fileList = (files || [])
    .filter(f => !!f)
    .map(mapFn)
    .sort(sortFn)
    .map(pair => {
      return <FileRow
        file={pair[1]}
        fields={fieldSet(fields)}
        className={rowClassName}
        linkFiles={linkFiles}
        onDelete={onDelete}
        onClick={onClick}
      />
    })
  if (!fileList || !fileList.length) {
    return (
      <div className={'rows ' + className}>
        <div class='row heading'>
          <h4 class='noFiles'>No files</h4>
        </div>
      </div>
    )
  }
  return (
    <div className={'rows ' + className}>
      {title &&
        <div class='row heading'>
          <h3>{title}</h3>}
        </div>
      }

	  	<div className={'rows ' + fileListClassName}>
	  		{fileList}
      </div>
  	</div>
	)
}

export const FileRow = props => {
  const { file, linkFiles, onDelete, onClick, className='row file', username='' } = 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

  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 class={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) => onClick && onClick(file, e)} href={file.url}>{name}</a>
            : <span class='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)}>{moment(date).format("YYYY-MM-DD")}</div>
      }
      {fields.has('datetime') &&
        <div className={"datetime " + util.carbon_date(date)}>{moment(date).format("YYYY-MM-DD h:mm a")}</div>
      }
      {fields.has('size') &&
        <div className={"size " + size[0]}>{size[1]}</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>
      }
      {props.options && props.options(file)}
    </div>
  )
}