import React from 'react';
import PropTypes from 'prop-types';
import { Table as SummaryTable, Title as SummaryTitle } from '@bufferapp/summary-table';
import { Table as HashtagsTable, Title as HashtagsTitle } from '@bufferapp/hashtags-table';
import { Table as PostsSummary, Title as PostsSummaryTitle } from '@bufferapp/posts-summary-table';
import { Table as AverageTable, Title as AverageTitle } from '@bufferapp/average-table';
import { Table as DemographicOverview, Title as DemographicOverviewTitle } from '@bufferapp/demographic-overview';
import { Chart as DemographicGenderAge, Title as DemographicGenderAgeTitle } from '@bufferapp/demographic-gender-age';
import { Chart as DemographicCities, Title as DemographicCitiesTitle } from '@bufferapp/demographic-cities';
import { Chart as DemographicCountries, Title as DemographicCountriesTitle } from '@bufferapp/demographic-countries';
import { Table as PostsTable, Title as PostsTitle } from '@bufferapp/posts-table';
import { Chart as CompareChart, Title as CompareTitle } from '@bufferapp/compare-chart';
import { Table as AggregateHeader, Title as AggregateHeaderTitle } from '@bufferapp/aggregate-header';
import { Table as AggregateMetric, Title as AggregateMetricTitle } from '@bufferapp/aggregated-metric';
import { Table as AggregatesDailyTable, Title as AggregatesDailyTitle } from '@bufferapp/analyze-aggregates-daily';
import { Table as AnswersTable, Title as AnswersTitle } from '@bufferapp/answers-summary';
import { BreakdownContent as StoriesBreakdown, Title as StoriesBreakdownTitle } from '@bufferapp/stories-breakdown';
import { Table as StoriesSummaryTable, Title as StoriesSummaryTitle } from '@bufferapp/stories-summary-table';
import { Chart as StoriesDaily, Title as StoriesDailyTitle } from '@bufferapp/stories-daily';
import { RecentPostsTable, Title as RecentPostsTitle } from '@bufferapp/recent-posts';
import { ContentWrapper as AnswersChart, Title as AnswersChartTitle } from '@bufferapp/answers-chart';
import { Grid as ShopifyTotalsGrid, Title as ShopifyTotalsTitle } from '@bufferapp/shopify-totals';
import { STORIES } from '@bufferapp/analyze-account';
import { Table as ShopifySources, Title as ShopifySourcesTitle } from '@bufferapp/shopify-sources';
import { Table as ShopifyProducts, Title as ShopifyProductsTitle } from '@bufferapp/shopify-products';
import { Table as CampaignPostsTable, Title as CampaignPostsTableTitle } from '@bufferapp/campaign-posts-table';
import { Grid as CampaignPulseGrid, Title as CampaignPulseTitle } from '@bufferapp/campaign-pulse';
import { Chart as CampaignPostsMetrics, Title as CampaignPostsMetricsTitle } from '@bufferapp/campaign-posts-metrics'

import { Chart } from './Chart';

export const CHARTS = {
  'summary-table': {
    chart: SummaryTable,
    title: SummaryTitle,
  },
  'hashtags-table': {
    chart: HashtagsTable,
    title: HashtagsTitle,
  },
  'posts-summary': {
    chart: PostsSummary,
    title: PostsSummaryTitle,
  },
  average: {
    chart: AverageTable,
    title: AverageTitle,
  },
  posts: {
    chart: PostsTable,
    title: PostsTitle,
  },
  compare: {
    chart: CompareChart,
    title: CompareTitle,
  },
  'aggregate-header': {
    chart: AggregateHeader,
    title: AggregateHeaderTitle,
  },
  'aggregated-metric': {
    chart: AggregateMetric,
    title: AggregateMetricTitle,
  },
  'aggregates_daily' : {
    chart: AggregatesDailyTable,
    title: AggregatesDailyTitle,
  },
  'demographic-overview': {
    chart: DemographicOverview,
    title: DemographicOverviewTitle,
  },
  'demographic-gender-age': {
    chart: DemographicGenderAge,
    title: DemographicGenderAgeTitle,
  },
  'demographic-cities': {
    chart: DemographicCities,
    title: DemographicCitiesTitle,
  },
  'demographic-countries': {
    chart: DemographicCountries,
    title: DemographicCountriesTitle,
  },
  'answers-summary': {
    chart: AnswersTable,
    title: AnswersTitle,
  },
  'answers-chart': {
    chart: AnswersChart,
    title: AnswersChartTitle,
  },
  'stories-breakdown': {
    chart: StoriesBreakdown,
    title: StoriesBreakdownTitle,
    requestedPermissions: { STORIES },
  },
  'recent-posts': {
    chart: RecentPostsTable,
    title: RecentPostsTitle,
  },
  'stories-summary': {
    chart: StoriesSummaryTable,
    title: StoriesSummaryTitle,
    requestedPermissions: { STORIES },
  },
  'stories-daily': {
    chart: StoriesDaily,
    title: StoriesDailyTitle,
  },
  'shopify-totals': {
    chart: ShopifyTotalsGrid,
    title: ShopifyTotalsTitle
  },
  'shopify-sources': {
    chart: ShopifySources,
    title: ShopifySourcesTitle,
  },
  'shopify-products': {
    chart: ShopifyProducts,
    title: ShopifyProductsTitle,
  },
  'campaign-posts-table': {
    chart: CampaignPostsTable,
    title: CampaignPostsTableTitle,
  },
  'campaign-pulse': {
    chart: CampaignPulseGrid,
    title: CampaignPulseTitle,
  },
  'campaign-posts-metrics': {
    chart: CampaignPostsMetrics,
    title: CampaignPostsMetricsTitle
  }
};

const ChartFactory = ({ charts, moveUp, moveDown, deleteChart, exporting, editChartNotes, saveChartNote }) =>
  charts.map((chart, index) => (
    <Chart
      chart={chart}
      exporting={exporting}
      moveUp={moveUp}
      moveDown={moveDown}
      deleteChart={deleteChart}
      index={index}
      charts={charts}
      permissions={CHARTS[chart.chart_id].requestedPermissions}
      editChartNotes={editChartNotes}
      saveChartNote={saveChartNote}
      key={index}
    />
  ));

ChartFactory.propTypes = {
  charts: PropTypes.arrayOf(PropTypes.shape({
    profile: PropTypes.shape({
      service: PropTypes.string,
      username: PropTypes.string,
    }),
    chart_id: PropTypes.string,
  })),
  moveUp: PropTypes.func.isRequired,
  moveDown: PropTypes.func.isRequired,
  deleteChart: PropTypes.func.isRequired,
  editChartNotes: PropTypes.func.isRequired,
  saveChartNote: PropTypes.func.isRequired,
};

export default ChartFactory;