import { observer } from 'mobx-react-lite';
import KanbanCardCss from './kanban-card.module.css';
import React from 'react';
import { ICardStore } from './store';
import { getStyleObjectFromString } from '../utils/style';

export type Props = {
	store: ICardStore
};

export type TagProps = {
	style?: string;
	tag: string;
};

export const KanbanCardTag = (props: TagProps): JSX.Element => {
	const inlineStyle = getStyleObjectFromString(props.style || '');
	return (
		<span className={KanbanCardCss.kanbanCardTag} style={inlineStyle}>
			{props.tag}
		</span>
	);
}

/**
 * Какие дальше требования к карточкам?
 * 
 * 1. Отобразить как было в статичной доске
 * 2. Переделать отображение с учётом store.params
 */

export const KanbanCard = observer((props: Props) => {
	let timePassedColorClassName = '';
	const timePassedIssueValue: string = props.store.issue.timePassedClass;
	if (timePassedIssueValue && KanbanCardCss[timePassedIssueValue]) {
		timePassedColorClassName = KanbanCardCss[timePassedIssueValue];
	}
	const timePassedClassName = `${KanbanCardCss.timepassedDot} ${timePassedColorClassName}`;
	let tagsSection = <></>;
	const tagsParams = props.store.params.fields.find((field) => {
		return field.component === 'tags';
	});
	console.debug('Tag params:', tagsParams); // DEBUG
	console.debug('Issue:', props.store.issue); // DEBUG
	if (tagsParams && props.store.issue[tagsParams.path]) {
		const tags = props.store.issue[tagsParams.path] as TagProps[];
		console.debug(`Tags:`, tags); // DEBUG
		tagsSection = (
			<div>
				{tagsParams.label || 'Tags'}: {tags.map(tag => <KanbanCardTag tag={tag.tag} style={tag.style} />)}
			</div>
		);
	}
	return (
		<div className={KanbanCardCss.kanbanCard}>
			<div className={KanbanCardCss.kanbanCardTitle}>
				<span className={timePassedClassName}></span>
				<a href={props.store.issue.url.url}>{props.store.issue.tracker.name} #{props.store.issue.id} - {props.store.issue.subject}</a>
				<div>Исп.: {props.store.issue.current_user.name}</div>
				<div>Прио.: {props.store.issue.priority.name}</div>
				<div>Версия: {props.store.issue.fixed_version?.name || ''}</div>
				<div>Прогресс: {props.store.issue.done_ratio}</div>
				<div>Трудозатраты: {props.store.issue.total_spent_hours} / {props.store.issue.total_estimated_hours}</div>
				{tagsSection}
			</div>
		</div>
	);
});

export default KanbanCard;