import { abbreviateNumber } from '@/modules/@common/helpers/number';

export const ORIGIN_FILTER = [
  { label: 'All Origins', value: 'ALL' },
  { label: 'Direct Navigation ', value: 'playlist' },
  { label: 'Collaboration', value: 'share' },
  { label: 'Search', value: 'search' },
];

export const INTERVAL = {
  hours: 'HOURS',
  days: 'DAYS',
  weeks: 'WEEKS',
};

export const CALENDAR_FILTER_VALUE = {
  today: {
    stringFrom: 'now/d',
    comparison: {
      stringFrom: 'now-1d/d',
      stringTo: 'now-1d/h',
    },
    interval: INTERVAL.hours,
    videoChartDataKey: 'hours',
    tooltipDateFormatter: (value) => value.format('hh A'),
    tooltipGraphDateFormatter: (value) => value.format('hh:mm A'),
  },
  yesterday: {
    stringFrom: 'now-1d/d',
    stringTo: 'now/d',
    comparison: {
      stringFrom: 'now-2d/d',
      stringTo: 'now-1d/d',
    },
    interval: INTERVAL.hours,
    videoChartDataKey: 'hours',
    tooltipDateFormatter: (value) => value.format('hh A'),
    tooltipGraphDateFormatter: (value) => value.format('hh:mm A'),
  },
  last7days: {
    stringFrom: 'now-7d/d',
    stringTo: 'now/d',
    comparison: {
      stringFrom: 'now-14d/d',
      stringTo: 'now-7d/d',
    },
    interval: INTERVAL.days,
    videoChartDataKey: 'date',
    tooltipDateFormatter: (value) => value.format('MMM DD'),
    tooltipGraphDateFormatter: (value) => value.format('MMM DD, YYYY'),
  },
  last30days: {
    stringFrom: 'now-30d/d',
    stringTo: 'now/d',
    comparison: {
      stringFrom: 'now-60d/d',
      stringTo: 'now-30d/d',
    },
    interval: INTERVAL.days,
    videoChartDataKey: 'date',
    tooltipDateFormatter: (value) => value.format('MMM DD'),
    tooltipGraphDateFormatter: (value) => value.format('MMM DD, YYYY'),
  },
  last90days: {
    stringFrom: 'now-90d/d',
    stringTo: 'now/d',
    comparison: {
      stringFrom: 'now-180d/d',
      stringTo: 'now-90d/d',
    },
    interval: INTERVAL.weeks,
    videoChartDataKey: 'weeks',
    tooltipDateFormatter: (value) => value.format('MMM DD'),
    tooltipGraphDateFormatter: (value) => value.format('MMM DD, YYYY'),
  },
  custom: 'Custom',
};

export const CALENDAR_FILTER = [
  { label: 'Today', value: CALENDAR_FILTER_VALUE.today },
  { label: 'Yesterday', value: CALENDAR_FILTER_VALUE.yesterday },
  { label: 'Last 7 Days', value: CALENDAR_FILTER_VALUE.last7days },
  { label: 'Last 30 Days', value: CALENDAR_FILTER_VALUE.last30days },
  { label: 'Last 90 Days', value: CALENDAR_FILTER_VALUE.last90days },
  { label: 'Custom', value: CALENDAR_FILTER_VALUE.custom },
];

export const VIDEO_METRICS_TABS = [
  {
    key: 'NO_OF_VIEWS',
    title: 'Views',
    formatter: (value) => abbreviateNumber(value, 2),
    dataKey: 'numOfViews',
    barColor: 'secondary.light',
  },
  {
    key: 'ATTENTION_SPAN',
    title: 'Attention Span',
    formatter: (value) => `${value?.toFixed(1)}%`,
    dataKey: 'attentionSpan',
    barColor: 'primary.main',
  },
  {
    key: 'ENG_SCORE',
    title: 'Eng. Score',
    formatter: (value) => value?.toFixed(2),
    dataKey: 'engScore',
    barColor: 'warning.main',
    domainChart: [0, 'dataMax'],
    ticks: [0, 1, 2, 3, 4, 5],
  },
];

export const TABS_CONFIG = {
  VIDEOS: {
    id: 'VIDEOS',
    title: 'Top Videos',
    label: 'Video Name',
    chartLegend: 'This Video',
  },
  CHANNELS: {
    id: 'CHANNELS',
    title: 'Top Channels',
    label: 'Channel Name',
    chartLegend: 'This Channel',
  },
  WATCHES: {
    id: 'WATCHES',
    title: 'Top Watches',
    label: 'Watch Name',
    chartLegend: 'This Watch',
  },
  HUBS: {
    id: 'HUBS',
    title: 'Top Hubs',
    label: 'Hub Name',
    chartLegend: 'This Hub',
  },
};

export const TABS = [TABS_CONFIG.VIDEOS, TABS_CONFIG.CHANNELS, TABS_CONFIG.WATCHES, TABS_CONFIG.HUBS];

export const TABLE_HEADERS = [
  {
    id: 'name',
    getLabel: (activeTabId) => TABS_CONFIG[activeTabId]?.label,
    sortable: false,
  },
  {
    id: 'NO_OF_VIEWS',
    getLabel: (activeTabId) => (activeTabId === TABS_CONFIG.VIDEOS.id ? 'Views' : 'Views, total'),
    sortable: true,
    align: 'center',
  },
  {
    id: 'ATTENTION_SPAN',
    getLabel: (activeTabId) => (activeTabId === TABS_CONFIG.VIDEOS.id ? 'Attention Span' : 'Attention Span, avg'),
    sortable: true,
    align: 'center',
  },
  {
    id: 'ENG_SCORE',
    getLabel: (activeTabId) => (activeTabId === TABS_CONFIG.VIDEOS.id ? 'Eng. Score' : 'Engagement Score, avg'),
    sortable: true,
    align: 'center',
  },
];
