import React from 'react';
import { PlusIcon, RefreshIcon } from '@heroicons/react/outline';
import GreyRowBox from '@/components/elements/GreyRowBox';
import Select from '@/components/elements/Select';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import { Button } from '@/components/elements/button/index';
import type { ImportProgressSnapshot } from '../../../api/server/importer';
import { ImporterProfile } from '../../../api/server/importer/profiles';
import { ImporterStatistics } from '../../../api/server/importer/statistics';
import ProfileList from './ProfileList';
import StatisticsPanel from './StatisticsPanel';

interface Props {
  profiles: ImporterProfile[];
  selectedId: number | null;
  statistics: ImporterStatistics | null;
  importProgress: ImportProgressSnapshot | null;
  loading: boolean;
  onNew: () => void;
  onRefresh: () => void;
  onSelect: (profile: ImporterProfile) => void;
  onDelete: (profile: ImporterProfile) => void;
}

export default ({
  profiles,
  selectedId,
  statistics,
  importProgress,
  loading,
  onNew,
  onRefresh,
  onSelect,
  onDelete,
}: Props) => {
  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const id = Number(event.currentTarget.value);
    const profile = profiles.find((item) => item.id === id);

    if (profile) {
      onSelect(profile);
    } else {
      onNew();
    }
  };

  return (
    <GreyRowBox $hoverable={false} className={'flex-col gap-3 !items-stretch !p-4'}>
      <div className={'flex items-center justify-between'}>
        <p className={'text-[10px] uppercase tracking-wider text-neutral-300'}>Profiles</p>
        <Tooltip content={'Refresh profiles'} placement={'top'}>
          <Button.Text
            type={'button'}
            size={Button.Sizes.Small}
            shape={Button.Shapes.IconSquare}
            variant={Button.Variants.Secondary}
            onClick={onRefresh}
          >
            <RefreshIcon className={'h-4 w-4'} />
          </Button.Text>
        </Tooltip>
      </div>

      <div className={'flex items-center gap-3'}>
        <Select className={'min-w-0 flex-1'} value={selectedId ? String(selectedId) : ''} onChange={handleSelect}>
          <option value={''}>New import</option>
          {profiles.map((profile) => (
            <option key={profile.id} value={profile.id}>
              {profile.name}
            </option>
          ))}
        </Select>
        <Tooltip content={'New import'} placement={'top'}>
          <Button.Text
            type={'button'}
            size={Button.Sizes.Small}
            shape={Button.Shapes.IconSquare}
            variant={Button.Variants.Secondary}
            onClick={onNew}
          >
            <PlusIcon className={'h-4 w-4'} />
          </Button.Text>
        </Tooltip>
      </div>

      <div className={'border-t border-neutral-600'} />

      <StatisticsPanel statistics={statistics} importProgress={importProgress} />

      <ProfileList
        profiles={profiles}
        selectedId={selectedId}
        loading={loading}
        onSelect={onSelect}
        onDelete={onDelete}
      />
    </GreyRowBox>
  );
};