import { FieldSettings, ViewType } from './TemplateFieldTypes/TemplateField';

export enum TemplateFieldType {
    TEXT = 'text',
    VISUAL = 'visual',
    UNSET = 'unset',
    DATA = 'data',
}

export enum TemplateFieldSize {
    TINY = 'tiny',
    SMALL = 'small',
    MEDIUM = 'medium',
    LARGE = 'large',
    HUGE = 'huge',
}

export class TemplateLayouts {
    public static get allTemplates(): FieldSettings[] {
        return Object.values(TemplateLayouts);
    }

    public static BasicSettings: FieldSettings = {
        title: 'template_framework',
        tl: [0, 0],
        br: [400, 700],
        viewType: ViewType.FREEFORM,
        opts: {},
    };

    public static FourField001: FieldSettings = {
        title: 'fourfield001',
        tl: [0, 0],
        br: [416, 700],
        viewType: ViewType.FREEFORM,
        opts: {
            backgroundColor: '#C0B887',
            _layout_borderRounding: '.05',
            //borderColor: '#6B461F',
            //borderWidth: '12',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.95, -1],
                br: [0.95, -0.85],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY],
                description: 'A title field for very short text that contextualizes the content.',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: '#F1F0E9',
                    hCentering: 'h-center',
                    contentBold: true,
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.87, -0.83],
                br: [0.87, 0.2],
                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                description: 'The main focus of the template; could be an image, long text, etc.',
                opts: {
                    _layout_borderRounding: '.05',
                    borderColor: '#8F5B25',
                    borderWidth: 6,
                    backgroundColor: '#CECAB9',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.8, 0.2],
                br: [0.8, 0.3],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A caption for field #2, very short text.',
                opts: {
                    backgroundColor: 'transparent',
                    hCentering: 'h-center',
                    text_fontColor: '#F1F0E9',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.87, 0.37],
                br: [0.87, 0.96],
                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                description: 'A medium-sized field for medium/long text.',
                opts: {
                    _layout_borderRounding: '.05',
                    borderColor: '#8F5B25',
                    borderWidth: 6,
                    backgroundColor: '#CECAB9',
                },
            },
        ],
    };

    public static FourField002: FieldSettings = {
        title: 'fourfield002',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [425, 778],
        opts: {
            backgroundColor: '#242425',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.83, -0.95],
                br: [0.83, -0.2],
                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
                opts: {
                    borderWidth: 8,
                    borderColor: '#F8E71C',
                    backgroundColor: '#242425',
                    text_fontColor: 'white',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.65, -0.2],
                br: [0.65, -0.02],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY],
                description: 'A tiny field for just a word or two of plain text.',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: 'white',
                    hCentering: 'h-center',
                    text_transform: 'uppercase',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.65, 0],
                br: [0.65, 0.18],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY],
                description: 'A tiny field for just a word or two of plain text.',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: 'white',
                    hCentering: 'h-center',
                    text_transform: 'uppercase',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.83, 0.2],
                br: [0.83, 0.95],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.',
                opts: {
                    borderWidth: 8,
                    borderColor: '#F8E71C',
                    text_fontColor: 'white',
                    backgroundColor: '#242425',
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.8, -0.075],
                br: [-0.525, 0.075],
                opts: {
                    backgroundColor: '#F8E71C',
                    _rotation: 45,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.3075, -0.0245],
                br: [-0.2175, 0.0245],
                opts: {
                    backgroundColor: '#F8E71C',
                    _rotation: 45,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.045, -0.0245],
                br: [0.045, 0.0245],
                opts: {
                    backgroundColor: '#F8E71C',
                    _rotation: 45,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [0.2175, -0.0245],
                br: [0.3075, 0.0245],
                opts: {
                    backgroundColor: '#F8E71C',
                    _rotation: 45,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [0.525, -0.075],
                br: [0.8, 0.075],
                opts: {
                    backgroundColor: '#F8E71C',
                    _rotation: 45,
                },
            },
        ],
    };

    // public static FourField003: TemplateDocInfos = {
    //     title: 'fourfield3',
    //     width: 477,
    //     height: 662,
    //     opts: {
    //         backgroundColor: '#9E9C95'
    //     },
    //     fields: [{
    //         tl: [-.875, -.9],
    //         br: [.875, .7],
    //         types: [TemplateFieldType.VISUAL],
    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
    //         description: '',
    //         opts: {
    //             borderWidth: '15',
    //             borderColor: '#E0E0DA',
    //         }
    //     }, {
    //         tl: [-.95, .8],
    //         br: [-.1, .95],
    //         types: [TemplateFieldType.TEXT],
    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
    //         description: '',
    //         opts: {
    //             backgroundColor: 'transparent',
    //             color: 'white',
    //             contentXCentering: 'h-right',
    //         }
    //     }, {
    //         tl: [.1, .8],
    //         br: [.95, .95],
    //         types: [TemplateFieldType.TEXT],
    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
    //         description: '',
    //         opts: {
    //             backgroundColor: 'transparent',
    //             color: 'red',
    //             fontTransform: 'uppercase',
    //             contentXCentering: 'h-left'
    //         }
    //     }, {
    //         tl: [0, -.9],
    //         br: [.85, -.66],
    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
    //         description: '',
    //         opts: {
    //             backgroundColor: 'transparent',
    //             contentXCentering: 'h-right'
    //         }
    //     }],
    //     decorations: [{
    //         tl: [-.025, .8],
    //         br: [.025, .95],
    //         opts: {
    //             backgroundColor: '#E0E0DA',
    //         }
    //     }]
    // };

    public static FourField004: FieldSettings = {
        title: 'fourfield04',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [414, 583],
        opts: {
            backgroundColor: '#6CCAF0',
            //borderColor: '#1088C3',
            //borderWidth: '10',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.86, -0.92],
                br: [-0.075, -0.77],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY],
                description: 'A tiny field for just a word or two of plain text.',
                opts: {
                    backgroundColor: '#E2B4F5',
                    borderWidth: 9,
                    borderColor: '#9222F1',
                    hCentering: 'h-center',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [0.075, -0.92],
                br: [0.86, -0.77],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY],
                description: 'A tiny field for just a word or two of plain text.',
                opts: {
                    backgroundColor: '#F5B4DD',
                    borderWidth: 9,
                    borderColor: '#E260F3',
                    hCentering: 'h-center',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.81, -0.64],
                br: [0.81, 0.48],
                types: [TemplateFieldType.VISUAL],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                description: 'A large to huge field for visual content that is the main content of the template.',
                opts: {
                    borderWidth: 16,
                    borderColor: '#A2BD77',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.86, 0.6],
                br: [0.86, 0.92],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium to large field for text that describes the visual content above',
                opts: {
                    borderWidth: 9,
                    borderColor: '#F0D601',
                    backgroundColor: '#F3F57D',
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.852, -0.67],
                br: [0.852, 0.51],
                opts: {
                    backgroundColor: 'transparent',
                    borderColor: '#007C0C',
                    borderWidth: 10,
                },
            },
        ],
    };

    public static FourField005: FieldSettings = {
        title: 'fourfield05',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [400, 514],
        opts: {
            backgroundColor: '#95A575',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.9, -0.925],
                br: [-0.075, -0.775],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A small text field for a title or word(s) that categorize the rest of the content.',
                opts: {
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                    hCentering: 'h-center',
                    backgroundColor: '#B8DC90',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [0.075, -0.925],
                br: [0.9, -0.775],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A small text field for a title that categorizes the rest of the content.',
                opts: {
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                    hCentering: 'h-center',
                    backgroundColor: '#B8DC90',
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.82, -0.4],
                br: [-0.5, -0.2],
                opts: {
                    backgroundColor: '#94B058',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.66, -0.65],
                br: [0.66, 0.25],
                types: [TemplateFieldType.VISUAL],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium to large field in the center of the template, for the main visual content.',
                opts: {
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                    backgroundColor: '#B8DC90',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.875, 0.425],
                br: [0.875, 0.925],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium to large field at the bottom of the template, for the main text content.',
                opts: {
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                    hCentering: 'h-center',
                    backgroundColor: '#B8DC90',
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-1.1, -0.62],
                br: [-0.9, -0.5],
                opts: {
                    backgroundColor: '#7A9D31',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-1.1, 0],
                br: [-0.9, 0.15],
                opts: {
                    backgroundColor: '#94B058',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.93, -0.265],
                br: [-0.715, -0.125],
                opts: {
                    backgroundColor: '#728745',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [0.7, -0.45],
                br: [0.85, -0.3],
                opts: {
                    backgroundColor: '#7A9D31',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [0.8, 0.03],
                br: [1.2, 0.33],
                opts: {
                    backgroundColor: '#728745',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [0.875, -0.13],
                br: [1.2, 0.12],
                opts: {
                    backgroundColor: '#94B058',
                    borderColor: '#3B4A2C',
                    borderWidth: 8,
                },
            },
        ],
    };

    public static FourFieldCarousel: FieldSettings = {
        title: 'title_fourfieldcarousel',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [500, 600],
        opts: {
            backgroundColor: '#D7CBAB',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.8, -0.9],
                br: [0.8, -0.5],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A small text field for a title that categorizes the rest of the content.',
                opts: {
                    hCentering: 'h-center',
                    backgroundColor: 'transparent',
                    text_transform: 'uppercase',
                },
            },
            {
                viewType: ViewType.CAROUSEL3D,
                tl: [-0.9, -0.5],
                br: [0.9, 0.25],
                opts: {
                    borderColor: '#847F69',
                    borderWidth: 8,
                    backgroundColor: '#C8BA94',
                },
                subfields: [
                    {
                        viewType: ViewType.STATIC,
                        tl: [-0.4, -0.6],
                        br: [0.4, 0.6],
                        types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                        sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                        description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                        opts: {
                            //borderColor: 'yellow',
                            //borderWidth: '8',
                        },
                    },
                    {
                        viewType: ViewType.STATIC,
                        tl: [-0.4, -0.6],
                        br: [0.4, 0.6],
                        types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                        sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                        description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                        opts: {
                            //borderColor: 'black',
                            //borderWidth: '8',
                        },
                    },
                    {
                        viewType: ViewType.STATIC,
                        tl: [-0.4, -0.6],
                        br: [0.4, 0.6],
                        types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
                        sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                        description: 'A medium to large field for content that will share central focus with other content in the carousel.',
                        opts: {
                            //borderColor: 'yellow',
                            //borderWidth: '8',
                        },
                    },
                ],
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.9, 0.35],
                br: [0.9, 0.9],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium text field for a description of the content in the carousel.',
                opts: {
                    hCentering: 'h-center',
                    backgroundColor: 'transparent',
                },
            },
        ],
    };

    public static ThreeField001: FieldSettings = {
        title: 'threefield001',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [575, 770],
        opts: {
            backgroundColor: '#DDD3A9',
        },
        subfields: [
            {
                viewType: ViewType.FREEFORM,
                tl: [-0.66, -0.747],
                br: [0.66, 0.247],
                description: 'A medium to large field for visual content that is the central focus.',
                opts: {
                    borderColor: 'yellow',
                    borderWidth: 8,
                    backgroundColor: '#DDD3A9',
                    _rotation: 45,
                },
                subfields: [
                    {
                        viewType: ViewType.STATIC,
                        tl: [-1.25, -1.25],
                        br: [1.25, 1.25],
                        types: [TemplateFieldType.VISUAL],
                        sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                        description: 'A medium to large field for visual content that is the central focus.',
                        opts: {
                            _rotation: -45,
                        },
                    },
                ],
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.7, 0.2],
                br: [0.7, 0.46],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A very small text field for one to a few words. A good caption for the image.',
                opts: {
                    backgroundColor: 'transparent',
                    hCentering: 'h-center',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.95, 0.5],
                br: [0.95, 0.95],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
                description: 'A medium to large text field for a thorough description of the image. ',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: 'white',
                },
            },
            {
                viewType: ViewType.FREEFORM,
                tl: [0.2, -1.32],
                br: [1.8, -0.66],
                opts: {
                    backgroundColor: '#CEB155',
                    _rotation: 45,
                },
                subfields: [
                    {
                        viewType: ViewType.DEC,
                        tl: [-1, -0.7],
                        br: [1, -0.625],
                        opts: {
                            backgroundColor: 'yellow',
                        },
                    },
                ],
            },
            {
                viewType: ViewType.FREEFORM,
                tl: [-1.8, -1.32],
                br: [-0.2, -0.66],
                opts: {
                    backgroundColor: '#CEB155',
                    _rotation: 135,
                },
                subfields: [
                    {
                        viewType: ViewType.DEC,
                        tl: [-1, -0.7],
                        br: [1, -0.625],
                        opts: {
                            backgroundColor: 'yellow',
                        },
                    },
                ],
            },
            {
                viewType: ViewType.FREEFORM,
                tl: [0.33, 0.75],
                br: [1.66, 1.25],
                opts: {
                    backgroundColor: '#CEB155',
                    _rotation: 135,
                },
                subfields: [
                    {
                        viewType: ViewType.DEC,
                        tl: [-1, -0.7],
                        br: [1, -0.625],
                        opts: {
                            backgroundColor: 'yellow',
                        },
                    },
                ],
            },
            {
                viewType: ViewType.FREEFORM,
                tl: [-1.66, 0.75],
                br: [-0.33, 1.25],
                opts: {
                    backgroundColor: '#CEB155',
                    _rotation: 45,
                },
                subfields: [
                    {
                        viewType: ViewType.DEC,
                        tl: [-1, -0.7],
                        br: [1, -0.625],
                        opts: {
                            backgroundColor: 'yellow',
                        },
                    },
                ],
            },
        ],
    };

    public static ThreeField002: FieldSettings = {
        title: 'threefield002',
        viewType: ViewType.FREEFORM,
        tl: [0, 0],
        br: [477, 662],
        opts: {
            backgroundColor: '#9E9C95',
        },
        subfields: [
            {
                viewType: ViewType.STATIC,
                tl: [-0.875, -0.9],
                br: [0.875, 0.7],
                types: [TemplateFieldType.VISUAL],
                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                description: 'A medium to large visual field for the main content of the template',
                opts: {
                    borderWidth: 15,
                    borderColor: '#E0E0DA',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [0.1, 0.775],
                br: [0.95, 0.975],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: '#AF0D0D',
                    text_transform: 'uppercase',
                    contentBold: true,
                    hCentering: 'h-left',
                },
            },
            {
                viewType: ViewType.STATIC,
                tl: [-0.95, 0.775],
                br: [-0.1, 0.975],
                types: [TemplateFieldType.TEXT],
                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
                description: 'A very small text field for one to a few words. The content should contextualize field 2.',
                opts: {
                    backgroundColor: 'transparent',
                    text_fontColor: 'black',
                    hCentering: 'h-right',
                },
            },
            {
                viewType: ViewType.DEC,
                tl: [-0.025, 0.8],
                br: [0.025, 0.95],
                opts: {
                    backgroundColor: '#E0E0DA',
                },
            },
        ],
    };
}