import { observer } from 'mobx-react-lite';
import { useState, useCallback } from 'react';
import { Popup, SlideModal } from 'UI';

import { NETWORK } from 'Player/ios/state';

import cls from './Network.module.css';

import TimeTable from 'Components/Session_/TimeTable';
import FetchDetails from 'Components/Session_/Fetch/FetchDetails';

const COLUMNS = [
  {
    label: 'Status',
    dataKey: 'status',
    width: 70,
  },
  {
    label: 'Method',
    dataKey: 'method',
    width: 60,
  },
  {
    label: 'url',
    width: 130,
    render: (r) => (
      <Popup
        content={<div className={cls.popupNameContent}>{r.url}</div>}
        size="mini"
        position="right center"
      >
        <div className={cls.popupNameTrigger}>{r.url}</div>
      </Popup>
    ),
  },
  {
    label: 'Size',
    width: 60,
    render: (r) => `${r.body.length}`,
  },
  {
    label: 'Time',
    width: 80,
    render: (r) => `${r.duration}ms`,
  },
];

function Network({ player }) {
  const [current, setCurrent] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const onRowClick = useCallback((raw, index) => {
    setCurrent(raw);
    setCurrentIndex(index);
  });
  const onNextClick = useCallback(() => {
    onRowClick(player.lists[NETWORK].list[currentIndex + 1], currentIndex + 1);
  });
  const onPrevClick = useCallback(() => {
    onRowClick(player.lists[NETWORK].list[currentIndex - 1], currentIndex - 1);
  });
  const closeModal = useCallback(() => setCurrent(null)); // TODO: handle in modal

  return (
    <>
      <SlideModal
        size="middle"
        title="Network Request"
        isDisplayed={current != null}
        content={
          current && (
            <FetchDetails
              resource={current}
              nextClick={onNextClick}
              prevClick={onPrevClick}
              first={currentIndex === 0}
              last={currentIndex === player.lists[NETWORK].countNow - 1}
            />
          )
        }
        onClose={closeModal}
      />
      <TimeTable
        rows={player.lists[NETWORK].listNow}
        hoverable
        tableHeight={270}
        onRowClick={onRowClick}
      >
        {COLUMNS}
      </TimeTable>
    </>
  );
}

export default observer(Network);