import { IconNames } from 'App/components/ui/SVG';
import { FilterKey } from 'Types/filter/filterType';
import { MetricType } from 'App/components/Dashboard/components/MetricTypeItem/MetricTypeItem';

export interface CardType {
  title: string;
  icon?: IconNames;
  description: string;
  slug: string;
  subTypes?: CardType[];
  disabled?: boolean;
}

export const LIBRARY = 'library';
export const TIMESERIES = 'timeseries';
export const TABLE = 'table';
export const HEATMAP = 'heatMap';
export const FUNNEL = 'funnel';
export const ERRORS = 'errors';
export const USER_PATH = 'pathAnalysis';
export const RETENTION = 'retention';
export const FEATURE_ADOPTION = 'featureAdoption';
export const INSIGHTS = 'insights';
export const PERFORMANCE = 'performance';

export interface Option {
  label: string;
  icon: string;
  value: string;
  description: string;
  disabled?: boolean;
}

export const TYPES: CardType[] = [
  {
    title: 'Add from Library',
    icon: 'grid',
    description: 'Select an existing card from your library',
    slug: LIBRARY,
  },
  {
    title: 'Timeseries',
    icon: 'graph-up',
    description: 'Combine captured events and filters to track trends over time.',
    slug: TIMESERIES,
    subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
  },
  {
    title: 'Heatmap',
    icon: 'puzzle-piece',
    description: 'See where users click and where they get frustrated.',
    slug: HEATMAP,
    subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
  },
  {
    title: 'Table',
    icon: 'list-alt',
    description: 'Create custom tables of users, sessions, errors, issues and more.',
    slug: TABLE,
    subTypes: [
      { title: 'Users', slug: FilterKey.USERID, description: '' },
      { title: 'Sessions', slug: FilterKey.SESSIONS, description: '' },
      { title: 'JS Errors', slug: FilterKey.ERRORS, description: '' },
      { title: 'Issues', slug: FilterKey.ISSUE, description: '' },
      { title: 'Browser', slug: FilterKey.USER_BROWSER, description: '' },
      { title: 'Devices', slug: FilterKey.USER_DEVICE, description: '' },
      { title: 'Countries', slug: FilterKey.USER_COUNTRY, description: '' },
      { title: 'URLs', slug: FilterKey.LOCATION, description: '' },
    ],
  },
  {
    title: 'Funnel',
    icon: 'funnel',
    description: 'Find out where users are dropping and understand why.',
    slug: FUNNEL,
  },
  {
    title: 'Path Analysis',
    icon: 'signpost-split',
    description: 'See where users are flowing and explore their journeys.',
    slug: USER_PATH,
  },
  // {
  //   title: 'Retention',
  //   icon: 'arrow-repeat',
  //   description: 'Get an understanding of how many users are returning.',
  //   slug: RETENTION,
  //   disabled: true,
  // },
  // {
  //   title: 'Feature Adoption',
  //   icon: 'card-checklist',
  //   description: 'See which features are used the most and how often.',
  //   slug: FEATURE_ADOPTION,
  // },
  // {
  //   title: 'Form Analysis',
  //   icon: 'card-checklist',
  //   description: 'Understand why users are not completing forms.',
  //   slug: FEATURE_ADOPTION,
  // },
];

export const DROPDOWN_OPTIONS = TYPES.filter((i: MetricType) => i.slug !== LIBRARY).map(
  (i: MetricType) => ({
    label: i.title,
    icon: i.icon,
    value: i.slug,
    description: i.description,
  })
);