import ArrowDownIcon from '@heroicons/react/solid/ArrowDownIcon'
import ArrowUpIcon from '@heroicons/react/solid/ArrowUpIcon'

import {LightSignal, Position, TradeDirection} from '../../../generated/ManagingApi'
import type {ICardPosition, ICardSignal, ICardText} from '../../../global/type.tsx'

function getItemTextHeaderClass() {
  return 'text-xs opacity-50 '
}
function getItemTextValueClass() {
  return 'text-md '
}

export function CardText({ title, content }: ICardText) {
  return (
    <div>
      <p className={getItemTextHeaderClass()}>{title}</p>
      <p className={getItemTextValueClass()}>{content}</p>
    </div>
  )
}

export function CardPosition({ positions, positivePosition }: ICardPosition) {
  return (
    <>
      <div>
        <p className={getItemTextHeaderClass()}>
          {positivePosition ? 'Winning position' : 'Losing position'}
        </p>
        <p className={getItemTextValueClass()}>
          {
            positions.filter((p: Position) => p.originDirection == TradeDirection.Long)
              .length
          }{' '}
          <ArrowUpIcon
            width="10"
            className="text-primary inline"
            display="initial"
          ></ArrowUpIcon>{' '}
          {
            positions.filter((p: Position) => p.originDirection == TradeDirection.Short)
              .length
          }{' '}
          <ArrowDownIcon
            width="10"
            className="text-accent inline"
            display="initial"
          ></ArrowDownIcon>
        </p>
      </div>
    </>
  )
}

export function CardSignal({ signals }: ICardSignal) {
  return (
    <>
      <div>
        <p className={getItemTextHeaderClass()}>Signals</p>
        <p className={getItemTextValueClass()}>
          {signals.filter((p: LightSignal) => p.direction == TradeDirection.Long).length}{' '}
          <ArrowUpIcon
            width="10"
            className="text-primary inline"
            display="initial"
          ></ArrowUpIcon>{' '}
          {signals.filter((p: LightSignal) => p.direction == TradeDirection.Short).length}{' '}
          <ArrowDownIcon
            width="10"
            className="text-accent inline"
            display="initial"
          ></ArrowDownIcon>
        </p>
      </div>
    </>
  )
}
