import { observer } from 'mobx-react-lite';
import React from 'react';
import { IIssueStore } from './store';
import Css from './issues-list-card.module.css';
import * as TimePassedNs from '../misc-components/time-passed';
import * as TagsNs from '../misc-components/tags';
import * as IssueHrefNs from '../misc-components/issue-href';
import * as IssueDetailsDialogNs from '../misc-components/issue-details-dialog';
import * as UnreadedFlagNs from '../misc-components/unreaded-flag';
import { SpentHoursToFixed } from '../utils/spent-hours-to-fixed';
import { getStyleObjectFromString } from '../utils/style';

export type Props = {
  store: IIssueStore;
};

export const defaultPriorityStyleKey = 'priorityStyle';

export const IssuesListCard = observer((props: Props): JSX.Element => {
  const unreadedStore = UnreadedFlagNs.CreateStoreFromLocalStorage(props.store);
  const detailsStore = IssueDetailsDialogNs.Store.create({
    issue: props.store,
    visible: false,
    unreadedFlagStore: unreadedStore,
  });
  const priorityStyle = getStyleObjectFromString(
    props.store[defaultPriorityStyleKey],
  );
  const tagsNewLine =
    props.store.styledTags && props.store.styledTags.length > 0 ? <br /> : null;
  return (
    <div
      className={Css.todoBlock}
      onClick={(e) => {
        e.stopPropagation();
        detailsStore.show();
      }}
    >
      <IssueDetailsDialogNs.IssueDetailsDialog store={detailsStore} />
      <div className={Css.relevanceColor}>
        <TimePassedNs.TimePassed
          params={{
            fromIssue: { issue: props.store, keyName: 'timePassedClass' },
          }}
        />
      </div>
      <div className={Css.importantInformation}>
        <span className={Css.issueSubject}>
          <IssueHrefNs.IssueHref
            url={props.store.url?.url || ''}
            subject={props.store.subject}
            tracker={props.store.tracker?.name || ''}
            id={props.store.id}
          />
        </span>
        <span> </span>
        <span className={Css.timeBox}>
          {SpentHoursToFixed(props.store.total_spent_hours)} /{' '}
          {SpentHoursToFixed(props.store.total_estimated_hours)}
        </span>
        {tagsNewLine}
        <TagsNs.Tags params={{ tags: props.store.styledTags }} />
        <div className={Css.positionInfo}>
          <span className={Css.timeBox}>{props.store.status.name}</span>
          <span> </span>
          <span className={Css.priorityBox} style={priorityStyle}>
            {props.store?.priority?.name}
          </span>
        </div>
      </div>
    </div>
  );
});
