import React, { useState } from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import JumpButton from 'Shared/DevTools/JumpButton';
import stl from '../console.module.css';

interface Props {
  log: any;
  iconProps: any;
  jump?: any;
  renderWithNL?: any;
  style?: any;
}
function ConsoleRow(props: Props) {
  const { log, iconProps, jump, renderWithNL, style } = props;
  const [expanded, setExpanded] = useState(false);
  const lines = log.value.split('\n').filter((l: any) => !!l);
  const canExpand = lines.length > 1;

  return (
    <div
      className={cn(stl.line, 'flex py-2 px-4 overflow-hidden group relative', {
        info: !log.isYellow && !log.isRed,
        warn: log.isYellow,
        error: log.isRed,
        'cursor-pointer': canExpand,
      })}
      style={style}
      onClick={() => setExpanded(!expanded)}
    >
      <div className={cn(stl.timestamp)}>
        <Icon size="14" className={stl.icon} {...iconProps} />
      </div>
      {/* <div className={cn(stl.timestamp, {})}>
        {Duration.fromMillis(log.time).toFormat('mm:ss.SSS')}
      </div> */}
      <div key={log.key} className={cn('')} data-scroll-item={log.isRed}>
        <div className={cn(stl.message, 'flex items-center')}>
          {canExpand && (
            <Icon
              name={expanded ? 'caret-down-fill' : 'caret-right-fill'}
              className="mr-2"
            />
          )}
          <span>{renderWithNL(lines.pop())}</span>
        </div>
        {/* {canExpand && expanded && lines.map((l: any, i: number) => <div key={l.slice(0,3)+i} className="ml-4 mb-1">{l}</div>)} */}
      </div>
      <JumpButton onClick={() => jump(log.time)} />
    </div>
  );
}

export default ConsoleRow;