import React, { useState, useEffect } from 'react'
import { List, Label } from 'semantic-ui-react'
import InfoBox from './InfoBox'
import * as colorlut from '../utils/color'
// import actions from '../../../../actions'
// import * as transform from '../utils/transform'
// const { siaShowImgBar } = actions

const AnnoStats = (props) => {
  const [hideList, setHideList] = useState([])

  useEffect(() => {
    setHideList([])
  }, [props.imgLoadCount])

  const onDismiss = () => {
    if (props.onDismiss) {
      props.onDismiss()
    }
  }

  const onLblClick = (lbl) => {
    let hideLbl = false
    if (hideList.includes(lbl.id)) {
      setHideList(hideList.filter((e) => e !== lbl.id))
      hideLbl = false
    } else {
      // hideList.push(lbl.id)
      setHideList([...hideList, lbl.id])
      hideLbl = true
    }
    if (props.onHideLbl) {
      props.onHideLbl(lbl, hideLbl)
    }
  }

  const renderRow = (s) => {
    const opacity = hideList.includes(s.id) ? 0.5 : 1.0
    return (
      <List.Item key={s.id}>
        <List.Content>
          <Label
            as="a"
            tag
            style={{ background: s.color, opacity: opacity }}
            onClick={() => onLblClick(s)}
          >
            {s.label}
            <Label.Detail>{s.amount}</Label.Detail>
          </Label>
        </List.Content>
      </List.Item>
    )
  }

  const renderRows = () => {
    let stats = {}
    props.annos.forEach((a) => {
      // // console.log('render rows', a)
      if (a.status !== 'deleted') {
        a.labelIds.forEach((lblId) => {
          if (lblId in stats) {
            stats[lblId] += 1
          } else {
            stats[lblId] = 1
          }
        })
        if (a.labelIds.length === 0) {
          if ((-1) in stats) {
            stats[-1] += 1
          } else {
            stats[-1] = 1
          }
        }
      }
    })
    const res = Object.entries(stats).map(([key, value]) => {
      let lbl = props.possibleLabels.find((e) => {
        return e.id === parseInt(key)
      })
      if (!lbl) {
        lbl = { id: -1, label: 'No Label', color: colorlut.getDefaultColor() }
      }

      lbl.amount = value
      // return renderRow({class:idToLbl[key], amount:value, color:idToColor[key]})
      return renderRow(lbl)
    })
    return res
  }
  const renderDescription = () => {
    return <List>{renderRows()}</List>
  }

  return (
    <InfoBox
      header={'Annotations per Label'}
      content={renderDescription()}
      visible={props.visible}
      defaultPos={props.defaultPos}
      onDismiss={(e) => onDismiss()}
    />
  )
}

export default AnnoStats