import Headline from './Headline.svelte';
import HeadlineStyles from './Headline.styles.js';
import Description from './Description.svelte';
import DescriptionStyles from './Description.styles.js';
import Source from './Source.svelte';
import Byline from './Byline.svelte';
import Notes from './Notes.svelte';
import NotesStyles from './Notes.styles.js';
import GetTheData from './GetTheData.svelte';
import EditInDatawrapper from './EditInDatawrapper.svelte';
import Embed from './Embed.svelte';
import Logo from './Logo.svelte';
import Rectangle from './Rectangle.svelte';
import Watermark from './Watermark.svelte';
import HorizontalRule from './HorizontalRule.svelte';
import svgRule from './svgRule.svelte';
import get from '@datawrapper/shared/get.js';
import { isObject } from 'underscore';

export default [
    {
        id: 'headline',
        tag: 'h3',
        region: 'header',
        priority: 10,
        // we can only include blocks whose presence does not depend on themeData
        includeInContext: true,
        styles: HeadlineStyles,
        test: ({ chart }) => chart.title && !get(chart, 'metadata.describe.hide-title'),
        component: Headline
    },
    {
        id: 'description',
        tag: 'p',
        region: 'header',
        priority: 20,
        includeInContext: true,
        styles: DescriptionStyles,
        test: ({ chart }) => get(chart, 'metadata.describe.intro'),
        component: Description
    },
    {
        id: 'notes',
        region: 'aboveFooter',
        priority: 10,
        styles: NotesStyles,
        includeInContext: true,
        test: ({ chart }) => get(chart, 'metadata.annotate.notes'),
        component: Notes
    },
    {
        id: 'byline',
        region: 'footerLeft',
        test: ({ chart }) => get(chart, 'metadata.describe.byline', false) || chart.basedOnByline,
        priority: 10,
        includeInContext: true,
        component: Byline
    },
    {
        id: 'source',
        region: 'footerLeft',
        test: ({ chart }) => get(chart, 'metadata.describe.source-name'),
        priority: 20,
        includeInContext: true,
        component: Source
    },
    {
        id: 'get-the-data',
        region: 'footerLeft',
        test: ({ chart, isStyleStatic }) =>
            get(chart, 'metadata.publish.blocks.get-the-data') &&
            !isStyleStatic &&
            chart.type !== 'locator-map',
        priority: 30,
        includeInContext: true,
        component: GetTheData
    },
    {
        id: 'edit',
        region: 'footerLeft',
        test: ({ chart, isStyleStatic }) =>
            get(chart, 'forkable') &&
            get(chart, 'metadata.publish.blocks.edit-in-datawrapper', false) &&
            !isStyleStatic,
        priority: 31,
        includeInContext: true,
        component: EditInDatawrapper
    },
    {
        id: 'embed',
        region: 'footerLeft',
        test: ({ chart, isStyleStatic }) =>
            get(chart, 'metadata.publish.blocks.embed') && !isStyleStatic,
        priority: 40,
        includeInContext: true,
        component: Embed
    },
    {
        id: 'logo',
        region: 'footerRight',
        test: ({ chart, themeData, logoId, forceLogo }) => {
            const metadataLogo = get(chart, 'metadata.publish.blocks.logo', {
                enabled: false
            });
            const themeLogoOptions = get(themeData, 'options.blocks.logo.data.options', []);
            const thisLogoId = logoId || metadataLogo.id;
            let logo = themeLogoOptions.find(logo => logo.id === thisLogoId);
            // fallback to first logo in theme options
            if (!thisLogoId || !logo) logo = themeLogoOptions[0] || {};
            // selected logo has no image or text
            if (!logo.imgSrc && !logo.text) return false;
            if (forceLogo === 'on') return true;
            if (forceLogo === 'off') return false;
            // support both old & new metadata
            return isObject(metadataLogo) ? metadataLogo.enabled : metadataLogo;
        },
        priority: 10,
        includeInContext: false,
        component: Logo
    },
    {
        id: 'rectangle',
        region: 'header',
        test: ({ themeData }) => !!get(themeData, 'options.blocks.rectangle'),
        priority: 1,
        includeInContext: false,
        component: Rectangle
    },
    {
        id: 'watermark',
        region: 'afterBody',
        test: ({ themeData, chart }) => {
            const field = get(themeData, 'options.watermark.custom-field');
            return get(themeData, 'options.watermark')
                ? field
                    ? get(chart, `metadata.custom.${field}`, '')
                    : get(themeData, 'options.watermark.text', 'CONFIDENTIAL')
                : false;
        },
        priority: 1,
        includeInContext: false,
        component: Watermark
    },
    hr(0, 'hr'),
    hr(1, 'hr'),
    hr(2, 'hr'),
    hr(0, 'svg-rule'),
    hr(1, 'svg-rule'),
    hr(2, 'svg-rule')
];

function hr(index, type) {
    const id = `${type}${index ? index : ''}`;
    return {
        id,
        region: 'header',
        test: ({ themeData }) => !!get(themeData, `options.blocks.${id}`),
        priority: 0,
        includeInContext: false,
        component: type === 'hr' ? HorizontalRule : svgRule
    };
}
