import { FC } from 'react';

import { Issue } from '../interfaces';
import { State } from '../interfaces/issue.interface';
import { IssueItem } from './IssueItem';

interface Props {
	// Like @Inputs in Angular
	issues: Issue[];
	state?: State;
	onStateChanged: (state?: State) => void;
}

export const IssueList: FC<Props> = ({ issues, state, onStateChanged }) => {
	return (
		<div className='card border-white'>
			<div className='card-header bg-dark'>
				<ul className='nav nav-pills card-header-pills'>
					<li className='nav-item'>
						<a className={`nav-link ${!state ? 'active' : ''}`} onClick={() => onStateChanged()}>
							All
						</a>
					</li>
					<li className='nav-item'>
						<a
							className={`nav-link ${state === State.Open ? 'active' : ''}`}
							onClick={() => onStateChanged(State.Open)}>
							Open
						</a>
					</li>
					<li className='nav-item'>
						<a
							className={`nav-link ${state === State.Closed ? 'active' : ''}`}
							onClick={() => onStateChanged(State.Closed)}>
							Closed
						</a>
					</li>
				</ul>
			</div>
			<div className='card-body text-dark'>
				{issues.map((issue) => (
					<IssueItem key={issue.id} issue={issue} />
				))}
			</div>
		</div>
	);
};

import { useState } from 'react';

import { LoadingIcon } from '../../shared/components/LoadingIcon';
import { IssueList, LabelPicker } from '../components';
import { useIssues } from '../hooks';
import { State } from '../interfaces';

export const ListView = () => {
	const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
	const [state, setState] = useState<State>();
	const { issuesQuery } = useIssues();

	const onLabelChanged = (label: string) => {
		selectedLabels.includes(label)
			? setSelectedLabels(selectedLabels.filter((lbs: string) => lbs !== label))
			: setSelectedLabels([...selectedLabels, label]);
	};

	return (
		<div className='row mt-5'>
			<div className='col-8'>
				{issuesQuery.isLoading ? (
					<LoadingIcon />
				) : (
					<IssueList
						issues={issuesQuery.data || []}
						state={state}
						onStateChanged={(newState?: State) => setState(newState)}
					/>
				)}
			</div>

			<div className='col-4'>
				<LabelPicker selectedLabels={selectedLabels} onChange={(label) => onLabelChanged(label)} />
			</div>
		</div>
	);
};