import { INPUT, RADIO, DROPDOWN, TOGGLE_CHECK, TOGGLE, COLORPICKER, GROUP_HEADER, SLIDER } from '../../schemaComponentTypes';
import { FOOTER_LAYOUT_OPTIONS, FOOTER_SIZES_OPTIONS, FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS, FOOTER_NEWSLETTER_POSITION_OPTIONS, FOOTER_LOGO_POSITION_OPTIONS, FOOTER_SOCIAL_ICON_POSITION_OPTIONS, CLASSIC_LAYOUT, NEWSLETTER_SOCIAL_LAYOUT, BOTTOM_BAR_LAYOUT, FEATURE_BAR_LAYOUT, DEFAULT_LOGO_SIZE } from '../footer';

export const footerSchemaForm = {
    footerStyleHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.footerStyleHeader.title',
        symbol: 'style'
    },
    layout: {
        title: 'uieditor.sfbComponent.footer.layout.title',
        type: RADIO,
        required: true,
        defaultValue: FOOTER_LAYOUT_OPTIONS[0].value,
        options: FOOTER_LAYOUT_OPTIONS,
        validation: {
            availableOptions: FOOTER_LAYOUT_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.radio.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    size: {
        title: 'uieditor.sfbComponent.footer.size.title',
        type: DROPDOWN,
        defaultValue: FOOTER_SIZES_OPTIONS[1].value,
        options: FOOTER_SIZES_OPTIONS,
        caption: 'uieditor.sfbComponent.footer.size.caption',
        validation: {
            availableOptions: FOOTER_SIZES_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.dropdown.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    copyright: {
        title: 'uieditor.sfbComponent.footer.copyright.title',
        type: INPUT,
        defaultValue: 'uieditor.sfbComponent.footer.copyright.defaultValue',
        caption: 'uieditor.sfbComponent.footer.copyright.caption'
    },
    settingsHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.settingsHeader.title',
        symbol: 'style'
    },
    displayLogo: {
        label: 'uieditor.sfbComponent.footer.displayLogo.title',
        defaultValue: true,
        type: TOGGLE_CHECK
    },
    logoSize: {
        title: 'uieditor.sfbComponent.footer.logoSize.title',
        type: SLIDER,
        defaultValue: DEFAULT_LOGO_SIZE,
        options: {
            range: true,
            step: 5,
            min: 50,
            max: 300
        }
    },
    logoPosition: {
        title: 'uieditor.sfbComponent.footer.logoPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: FOOTER_LOGO_POSITION_OPTIONS[0].value,
        options: FOOTER_LOGO_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notInclude',
                value: CLASSIC_LAYOUT
            }
        },
        validation: {
            availableOptions: FOOTER_LOGO_POSITION_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.dropdown.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    footerBackground: {
        title: 'uieditor.sfbComponent.footer.footerBackground.title',
        type: COLORPICKER
    },
    footerText: {
        title: 'uieditor.sfbComponent.footer.footerText.title',
        type: COLORPICKER
    },
    bottomBarBackground: {
        title: 'uieditor.sfbComponent.footer.bottomBarBackground.title',
        type: COLORPICKER,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notInclude',
                value: CLASSIC_LAYOUT
            }
        }
    },
    bottomBarText: {
        title: 'uieditor.sfbComponent.footer.bottomBarText.title',
        type: COLORPICKER,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notInclude',
                value: CLASSIC_LAYOUT
            }
        }
    },
    displayLanguageSwitcher: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displayLanguageSwitcher.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displayLanguageSwitcher.labelOff',
        defaultValue: true
    },
    navigationHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.navigationHeader.title',
        symbol: 'quickview'
    },
    displayNavSeparator: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displayNavSeparator.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displayNavSeparator.labelOff',
        defaultValue: true
    },
    navSeparatorColor: {
        title: 'uieditor.sfbComponent.footer.navigationSeparatorColor.title',
        type: COLORPICKER,
        conditionalAttributes: {
            isVisible: {
                when: 'displayNavSeparator',
                connector: 'equals',
                value: true
            }
        }
    },
    socialMediaHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.socialMediaHeader.title',
        symbol: 'quickview'
    },
    displaySocialMedia: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displaySocialMedia.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displaySocialMedia.labelOff',
        defaultValue: true
    },
    displayDefaultSocialIcons: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displayDefaultSocialIcons.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displayDefaultSocialIcons.labelOff',
        defaultValue: true
    },
    socialIconPosition: {
        title: 'uieditor.sfbComponent.footer.socialIconPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: FOOTER_SOCIAL_ICON_POSITION_OPTIONS[0].value,
        options: FOOTER_SOCIAL_ICON_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notInclude',
                value: BOTTOM_BAR_LAYOUT
            }
        },
        validation: {
            availableOptions: FOOTER_SOCIAL_ICON_POSITION_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.dropdown.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    socialIconColor: {
        title: 'uieditor.sfbComponent.footer.socialIconColor.title',
        type: COLORPICKER
    },
    newsletterHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.newsletterHeader.title',
        symbol: 'quickview',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterTitle: {
        title: 'uieditor.sfbComponent.footer.newsletterTitle.title',
        type: INPUT,
        defaultValue: '',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterText: {
        title: 'uieditor.sfbComponent.footer.newsletterText.title',
        type: INPUT,
        defaultValue: '',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterButtonLabel: {
        title: 'uieditor.sfbComponent.footer.newsletterButtonLabel.title',
        type: INPUT,
        defaultValue: '',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterButtonLink: {
        title: 'uieditor.sfbComponent.footer.newsletterButtonLink.title',
        type: INPUT,
        placeholder: 'uieditor.sfbComponent.footer.newsletterButtonLink.placeholder',
        defaultValue: '',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterButtonStyle: {
        title: 'uieditor.sfbComponent.footer.newsletterButtonStyle.title',
        type: RADIO,
        required: true,
        defaultValue: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS[0].value,
        options: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        },
        validation: {
            availableOptions: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.radio.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    newsletterSocialPosition: {
        title: 'uieditor.sfbComponent.footer.newsletterSocialPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: FOOTER_NEWSLETTER_POSITION_OPTIONS[1].value,
        options: FOOTER_NEWSLETTER_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        },
        validation: {
            availableOptions: FOOTER_NEWSLETTER_POSITION_OPTIONS.map(({ value }) => value),
            message: 'uieditor.sfbComponent.dropdown.validation.message',
            default: 'uieditor.sfbComponent.dropdown.defaultValue'
        }
    },
    featureBarHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.featureBarHeader.title',
        symbol: 'quickview',
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: FEATURE_BAR_LAYOUT
            }
        }
    },
    featureBarBackground: {
        title: 'uieditor.sfbComponent.footer.featureBarBackground.title',
        type: COLORPICKER,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: FEATURE_BAR_LAYOUT
            }
        }
    },
    featureBarText: {
        title: 'uieditor.sfbComponent.footer.featureBarText.title',
        type: COLORPICKER,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: FEATURE_BAR_LAYOUT
            }
        }
    }
};
