import { ArrowRight, Clock, Close, Info, Reset } from './Icons';
import { RouteBadge } from './RouteBadge';
import type { Alert } from './types';

const periodFormat = new Intl.DateTimeFormat('ru', { timeZone: 'Europe/Minsk', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
export function AlertCard({ alert }: { alert: Alert }) {
  const cancelled = alert.type === 'cancellation';
  const detour = alert.type === 'detour';
  const delayed = alert.type === 'delay';
  const Icon = cancelled ? Close : detour ? Reset : delayed ? Clock : Info;
  const label = cancelled ? 'Отмена рейсов' : detour ? 'Изменение маршрута' : delayed ? 'Задержка движения' : alert.type === 'info' ? 'Обратите внимание' : 'Изменения движения';
  const periodAt = alert.endAt || alert.startAt;
  const period = periodAt && Number.isFinite(Date.parse(periodAt)) ? periodFormat.format(Date.parse(periodAt)) : null;
  return <article className="notice" data-kind={cancelled ? 'cancellation' : detour ? 'detour' : delayed ? 'delay' : 'info'}>
    <div className="notice-graphic" aria-hidden="true"><div className="notice-signal"><Icon size={44} /></div><span className="notice-line" /><span className="notice-endpoint" /></div>
    <div className="notice-content">
      <div className="notice-meta"><span className="notice-type">{label}</span>{period && <span className="notice-period">{alert.endAt ? 'До' : 'С'} {period}</span>}</div>
      {!!alert.routeNumbers.length && <div className="notice-routes" aria-label="Затронутые маршруты">{alert.routeNumbers.map(number => <RouteBadge key={number} number={number} filled />)}</div>}
      <h3>{alert.title}</h3><p>{alert.message}</p>
      {!alert.routeNumbers.length && <div className="notice-scope"><ArrowRight size={18} /><span>На этой остановке</span></div>}
    </div>
    <span className="notice-watermark" aria-hidden="true"><Icon size={180} /></span>
  </article>;
}