import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { clamp, percent } from '../util'

export const Loader = () => (
  <div>
    <div className='circular-loader color'>
      <div className="stroke">
        <div className="stroke-left"></div>
        <div className="stroke-right"></div>
      </div>
    </div>
  </div>
)

export const Swatch = ({ color }) => (
  <div
    className='swatch'
    style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
  />
)

export const Dot = ({ color }) => (
  <div
    className='dot'
    style={{ backgroundColor: color }}
  />
)

export const Columns = ({ count, margin, width, object, children, className }) => {
  if (!object || !object.length) object = children
  if (!object || !object.length) return null
  margin = margin || 380
  width = width || 250
  count = count || Math.floor((window.innerWidth - margin) / width)
  let columns = []
  let len = object.length
  let j = 0
  for (let i = 0; i < count; i++) {
    let column_len = len * (i + 1) / count
    let column = []
    for (; j < column_len; j++) {
      column.push(<div key={j}>{object[j]}</div>)
    }
    columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
    if (j >= len) break
  }
  return (
    <div className={'row columnCells ' + className}>
      {columns}
    </div>
  )
}

export const Statistic = ({ name, value, link }) => (
  <div className='statistic row'>
    <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
    <div className='int'>{value}</div>
  </div>
)

export const Detections = ({ detections, labels }) => (
  (detections || []).map(({ label, rect }, i) => (
    <div
    className='rect'
      key={i}
      style={{
        left: percent(clamp(rect.x1)),
        width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
        top: percent(clamp(rect.y1)),
        height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
      }}>
      {labels && <span>{label.replace(/_/g, ' ')}</span>}
    </div>
  )
))

export const Progress = ({ current, total }) => (
  <div className='progress'>
    <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
  </div>
)