import { INPUT, RADIO, DROPDOWN, TOGGLE, COLORPICKER,
    GROUP_HEADER, SLIDER, LOGO, DRAWER_LIST } 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,
    SITEMAP_LAYOUT, FEATURE_BAR_LAYOUT, DEFAULT_LOGO_SIZE, FOOTER_NEWSLETTER_LOGO_POSITION_OPTIONS,
    DEFAULT_SOCIAL_MEDIAS } from '../footer';
import { footerFeaturesMock } from '../../../../mocks/components/footer';

const footerDefaultValues = {
    layout: FOOTER_LAYOUT_OPTIONS[1].value,
    size: FOOTER_SIZES_OPTIONS[1].value,
    copyright: 'uieditor.sfbComponent.footer.copyright.defaultValue',
    logoSize: DEFAULT_LOGO_SIZE,
    logoPosition: FOOTER_LOGO_POSITION_OPTIONS[0].value,
    newsletterLogoPosition: FOOTER_NEWSLETTER_LOGO_POSITION_OPTIONS[0].value,
    footerBackground: undefined,
    footerText: undefined,
    bottomBarBackground: undefined,
    bottomBarText: undefined,
    displayNavSeparator: true,
    navSeparatorColor: undefined,
    socials: DEFAULT_SOCIAL_MEDIAS,
    displaySocialMedia: true,
    displayDefaultSocialIcons: true,
    socialIconPosition: FOOTER_SOCIAL_ICON_POSITION_OPTIONS[0].value,
    socialIconColor: undefined,
    newsletterTitle: 'uieditor.sfbComponent.footer.newsletterTitle.defaultValue',
    newsletterText: 'uieditor.sfbComponent.footer.newsletterText.defaultValue',
    newsletterButtonLabel: 'uieditor.sfbComponent.footer.newsletterButtonLabel.defaultValue',
    newsletterButtonLink: 'uieditor.sfbComponent.footer.newsletterButtonLink.defaultValue',
    newsletterButtonStyle: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS[0].value,
    newsletterSocialPosition: FOOTER_NEWSLETTER_POSITION_OPTIONS[1].value,
    features: footerFeaturesMock,
    featureBarBackground: undefined,
    featureBarText: undefined
};

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: footerDefaultValues.layout,
        options: FOOTER_LAYOUT_OPTIONS
    },
    size: {
        title: 'uieditor.sfbComponent.footer.size.title',
        type: DROPDOWN,
        defaultValue: footerDefaultValues.size,
        options: FOOTER_SIZES_OPTIONS,
        caption: 'uieditor.sfbComponent.footer.size.caption'
    },
    copyright: {
        title: 'uieditor.sfbComponent.footer.copyright.title',
        type: INPUT,
        defaultValue: footerDefaultValues.copyright,
        caption: 'uieditor.sfbComponent.footer.copyright.caption'
    },
    settingsHeader: {
        type: GROUP_HEADER,
        title: 'uieditor.sfbComponent.footer.settingsHeader.title',
        symbol: 'style'
    },
    selectedLogo: {
        defaultValue: 'logoImage',
        type: LOGO,
        required: true
    },
    logoSize: {
        title: 'uieditor.sfbComponent.footer.logoSize.title',
        type: SLIDER,
        defaultValue: footerDefaultValues.logoSize,
        options: {
            range: true,
            step: 1,
            min: 30,
            max: 100
        }
    },
    logoPosition: {
        title: 'uieditor.sfbComponent.footer.logoPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: footerDefaultValues.logoPosition,
        options: FOOTER_LOGO_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: [SITEMAP_LAYOUT, FEATURE_BAR_LAYOUT]
            }
        }
    },
    newsletterLogoPosition: {
        title: 'uieditor.sfbComponent.footer.logoPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: footerDefaultValues.newsletterLogoPosition,
        options: FOOTER_NEWSLETTER_LOGO_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    footerBackground: {
        title: 'uieditor.sfbComponent.footer.footerBackground.title',
        type: COLORPICKER,
        defaultValue: footerDefaultValues.footerBackground
    },
    footerText: {
        title: 'uieditor.sfbComponent.footer.footerText.title',
        type: COLORPICKER,
        defaultValue: footerDefaultValues.footerText
    },
    bottomBarBackground: {
        title: 'uieditor.sfbComponent.footer.bottomBarBackground.title',
        type: COLORPICKER,
        defaultValue: footerDefaultValues.bottomBarBackground,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notEquals',
                value: CLASSIC_LAYOUT
            }
        }
    },
    bottomBarText: {
        title: 'uieditor.sfbComponent.footer.bottomBarText.title',
        type: COLORPICKER,
        defaultValue: footerDefaultValues.bottomBarText,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notEquals',
                value: CLASSIC_LAYOUT
            }
        }
    },
    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: footerDefaultValues.displayNavSeparator
    },
    navSeparatorColor: {
        title: 'uieditor.sfbComponent.footer.navigationSeparatorColor.title',
        type: COLORPICKER,
        defaultValue: footerDefaultValues.navSeparatorColor,
        conditionalAttributes: {
            isVisible: {
                when: 'displayNavSeparator',
                connector: 'equals',
                value: true
            }
        }
    },
    socials: {
        title: 'uieditor.sfbComponent.footer.socialIcons.title',
        type: DRAWER_LIST,
        defaultValue: footerDefaultValues.socials
    },
    displaySocialMedia: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displaySocialMedia.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displaySocialMedia.labelOff',
        defaultValue: footerDefaultValues.displaySocialMedia
    },
    displayDefaultSocialIcons: {
        type: TOGGLE,
        labelOn: 'uieditor.sfbComponent.footer.displayDefaultSocialIcons.labelOn',
        labelOff: 'uieditor.sfbComponent.footer.displayDefaultSocialIcons.labelOff',
        defaultValue: footerDefaultValues.displayDefaultSocialIcons
    },
    socialIconPosition: {
        title: 'uieditor.sfbComponent.footer.socialIconPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: footerDefaultValues.socialIconPosition,
        options: FOOTER_SOCIAL_ICON_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'notEquals',
                value: SITEMAP_LAYOUT
            }
        }
    },
    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: footerDefaultValues.newsletterTitle,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterText: {
        title: 'uieditor.sfbComponent.footer.newsletterText.title',
        type: INPUT,
        defaultValue: footerDefaultValues.newsletterText,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterButtonLabel: {
        title: 'uieditor.sfbComponent.footer.newsletterButtonLabel.title',
        type: INPUT,
        defaultValue: footerDefaultValues.newsletterButtonLabel,
        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: footerDefaultValues.newsletterButtonLink,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterButtonStyle: {
        title: 'uieditor.sfbComponent.footer.newsletterButtonStyle.title',
        type: RADIO,
        required: true,
        defaultValue: footerDefaultValues.newsletterButtonStyle,
        options: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    },
    newsletterSocialPosition: {
        title: 'uieditor.sfbComponent.footer.newsletterSocialPosition.title',
        type: DROPDOWN,
        required: true,
        defaultValue: footerDefaultValues.newsletterSocialPosition,
        options: FOOTER_NEWSLETTER_POSITION_OPTIONS,
        conditionalAttributes: {
            isVisible: {
                when: 'layout',
                connector: 'equals',
                value: NEWSLETTER_SOCIAL_LAYOUT
            }
        }
    }
    // FIXME: https://appdirect.jira.com/browse/MP-34811 .
    // featureBarHeader: {
    //     type: GROUP_HEADER,
    //     title: 'uieditor.sfbComponent.footer.featureBarHeader.title',
    //     symbol: 'quickview',
    //     conditionalAttributes: {
    //         isVisible: {
    //             when: 'layout',
    //             connector: 'equals',
    //             value: FEATURE_BAR_LAYOUT
    //         }
    //     }
    // },
    // features: {
    //     title: 'uieditor.sfbComponent.footer.features.title',
    //     type: DRAWER_LIST,
    //     defaultValue: footerDefaultValues.features,
    //     caption: 'uieditor.sfbComponent.footer.features.caption',
    //     conditionalAttributes: {
    //         isVisible: {
    //             when: 'layout',
    //             connector: 'equals',
    //             value: FEATURE_BAR_LAYOUT
    //         }
    //     }
    // },
    // featureBarBackground: {
    //     title: 'uieditor.sfbComponent.footer.featureBarBackground.title',
    //     type: COLORPICKER,
    //     defaultValue: footerDefaultValues.featureBarBackground,
    //     conditionalAttributes: {
    //         isVisible: {
    //             when: 'layout',
    //             connector: 'equals',
    //             value: FEATURE_BAR_LAYOUT
    //         }
    //     }
    // },
    // featureBarText: {
    //     title: 'uieditor.sfbComponent.footer.featureBarText.title',
    //     type: COLORPICKER,
    //     defaultValue: footerDefaultValues.featureBarText,
    //     conditionalAttributes: {
    //         isVisible: {
    //             when: 'layout',
    //             connector: 'equals',
    //             value: FEATURE_BAR_LAYOUT
    //         }
    //     }
    // }
};

export const footerNewsLetterDefaultProps = {
    buttonTheme: FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS[0].value, // primary
    url: '/',
    i18n: {
        newsletterTitle: 'Newsletter title',
        newsletterDescription: 'Newsletter description',
        newsletterButtonLabel: 'Newsletter button label'
    }
};
