import React, { useState } from 'react';
import { connectPlayer, jump } from 'Player';
import Log from 'Types/session/log';
import BottomBlock from '../BottomBlock';
import { LEVEL } from 'Types/session/log';
import { Tabs, Input, Icon, NoContent } from 'UI';
import cn from 'classnames';
import ConsoleRow from '../ConsoleRow';
import { getRE } from 'App/utils';
import {
  List,
  CellMeasurer,
  CellMeasurerCache,
  AutoSizer,
} from 'react-virtualized';

const ALL = 'ALL';
const INFO = 'INFO';
const WARNINGS = 'WARNINGS';
const ERRORS = 'ERRORS';

const LEVEL_TAB = {
  [LEVEL.INFO]: INFO,
  [LEVEL.LOG]: INFO,
  [LEVEL.WARNING]: WARNINGS,
  [LEVEL.ERROR]: ERRORS,
  [LEVEL.EXCEPTION]: ERRORS,
};

const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({ text: tab, key: tab }));

function renderWithNL(s = '') {
  if (typeof s !== 'string') return '';
  return s.split('\n').map((line, i) => <div className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
}

const getIconProps = (level: any) => {
  switch (level) {
    case LEVEL.INFO:
    case LEVEL.LOG:
      return {
        name: 'console/info',
        color: 'blue2',
      };
    case LEVEL.WARN:
    case LEVEL.WARNING:
      return {
        name: 'console/warning',
        color: 'red2',
      };
    case LEVEL.ERROR:
      return {
        name: 'console/error',
        color: 'red',
      };
  }
  return null;
};

interface Props {
  logs: any;
  exceptions: any;
}
function ConsolePanel(props: Props) {
  const { logs } = props;
  const additionalHeight = 0;
  const [activeTab, setActiveTab] = useState(ALL);
  const [filter, setFilter] = useState('');

  const cache = new CellMeasurerCache({
    fixedWidth: true,
    keyMapper: (index: number) => filtered[index],
  });
  const _list = React.useRef();

  const _rowRenderer = ({ index, key, parent, style }: any) => {
    const item = filtered[index];

    return (
      <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
        {({ measure }: any) => (
          <ConsoleRow
            style={style}
            log={item}
            jump={jump}
            iconProps={getIconProps(item.level)}
            renderWithNL={renderWithNL}
            recalcHeight={() => {
              measure();
              (_list as any).current.recomputeRowHeights(index);
            }}
          />
        )}
      </CellMeasurer>
    );
  };

  let filtered = React.useMemo(() => {
    const filterRE = getRE(filter, 'i');
    let list = logs;

    list = list.filter(
      ({ value, level }: any) =>
        (!!filter ? filterRE.test(value) : true) &&
        (activeTab === ALL || activeTab === LEVEL_TAB[level])
    );
    return list;
  }, [filter, activeTab]);

  const onTabClick = (activeTab: any) => setActiveTab(activeTab);
  const onFilterChange = ({ target: { value } }: any) => setFilter(value);

  return (
    <BottomBlock style={{ height: 300 + additionalHeight + 'px' }}>
      <BottomBlock.Header>
        <div className="flex items-center">
          <span className="font-semibold color-gray-medium mr-4">Console</span>
          <Tabs tabs={TABS} active={activeTab} onClick={onTabClick} border={false} />
        </div>
        <Input
          className="input-small h-8"
          placeholder="Filter by keyword"
          icon="search"
          iconPosition="left"
          name="filter"
          height={28}
          onChange={onFilterChange}
        />
      </BottomBlock.Header>
      <BottomBlock.Content className="overflow-y-auto">
        <NoContent
          title={
            <div className="capitalize flex items-center mt-16">
              <Icon name="info-circle" className="mr-2" size="18" />
              No Data
            </div>
          }
          size="small"
          show={filtered.length === 0}
        >
          <AutoSizer>
            {({ height, width }: any) => (
              <List
                ref={_list}
                deferredMeasurementCache={cache}
                overscanRowCount={5}
                rowCount={Math.ceil(filtered.length || 1)}
                rowHeight={cache.rowHeight}
                rowRenderer={_rowRenderer}
                width={width}
                height={height}
              />
            )}
          </AutoSizer>
        </NoContent>
      </BottomBlock.Content>
    </BottomBlock>
  );
}

export default connectPlayer((state: any) => {
  const logs = state.logList;
  const exceptions = state.exceptionsList; // TODO merge
  const logExceptions = exceptions.map(({ time, errorId, name, projectId }: any) =>
    Log({
      level: LEVEL.ERROR,
      value: name,
      time,
      errorId,
    })
  );
  return {
    logs: logs.concat(logExceptions),
  };
})(ConsolePanel);
