import usePage from '../../hooks/usePage';
import Store from '../../store';
import * as actions from '../../store/actions';
import * as selectors from '../../store/selectors';

import Content from '../ui/Content';
import List from '../ui/List';
import VirtualScroll from '../ui/VirtualScroll';

const ListEntry = ({ list, ...props }) => (
  <div
    {...props}
    className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200"
  >
    <span className="text-md">{list.name}</span>
  </div>
);

const AllLists = ({ onSelect }) => {
  const lists = Store.useState(selectors.getLists);

  return (
    <VirtualScroll
      data={lists}
      totalCount={lists.length}
      style={{ height: '100%', width: '100%' }}
      itemContent={(i, list) => (
        <ListEntry list={list} onClick={() => onSelect(list)} onClose={() => onSelect(null)} />
      )}
    />
  );
};

const Lists = ({ selected }) => {
  usePage({
    title: 'Lists',
  });

  return (
    <Content visible={true} className="p-4 dark:bg-black">
      <List className="h-full w-full">
        {/*selected && (*/}
        <AllLists
          onSelect={list => {
            /*
            actions.setSelectedList(list);
            actions.setPageById('list-detail');
            */
          }}
        />
        {/*)}*/}
      </List>
    </Content>
  );
};

export default Lists;