import React, { useState } from 'react'
import { Icon } from 'UI';
import cn from 'classnames';
import stl from './errorFrame.css';

function ErrorFrame({ frame = {}, showRaw, isFirst }) {
  const [open, setOpen] = useState(isFirst)
  const hasContext = frame.context && frame.context.length > 0;
  return (
    <div>
      { showRaw ? 
        <div className={stl.rawLine}>at { frame.function ? frame.function : '?' } <span className="color-gray-medium">({`${frame.filename}:${frame.lineNo}:${frame.colNo}`})</span></div>
      :
        <div className={stl.formatted}>
          <div className={cn(stl.header, 'flex items-center cursor-pointer')} onClick={() => setOpen(!open)}>
            <div className="truncate">
              <span className="font-medium">{ frame.absPath }</span>
              { frame.function && 
              <>
                <span>{' in '}</span> 
                <span className="font-medium"> {frame.function} </span>
              </>
              }
              <span>{' at line '}</span> 
              <span className="font-medium">
                {frame.lineNo}:{frame.colNo}
              </span>
            </div>
            { hasContext && 
              <div className="ml-auto mr-3">
                <Icon name={ open ? 'minus' : 'plus'} size="14" color="gray-medium" />
              </div>
            }
          </div>
          { open && hasContext &&
            <ol start={ frame.context[0][0]} className={stl.content}>
              { frame.context.map(i => (
                <li 
                  key={i[0]}
                  className={ cn("leading-7  text-sm break-all h-auto pl-2", { [stl.errorLine] :i[0] == frame.lineNo }) }
                >
                  <span>{ i[1].replace(/ /g, "\u00a0") }</span>
                </li>
              ))}
            </ol>
          }
        </div>
      }
    </div>
  )
}

export default ErrorFrame;