import React from 'react';
import PropTypes from 'prop-types';
import { TOGGLE } from '../../constants/schemaComponentTypes';
import { createNamespace } from '../../tools/namingTools';
import { useIsScrolledPassedWindowHeight } from '../../tools/interactivity/scroll';
import ButtonPageScroll from '../../atoms/button-page-scroll/ButtonPageScroll';
import './styles/StickyButtonPageScroll.scss';

const n = createNamespace('StickyButtonPageScroll');

const StickyButtonPageScroll = ({
    settings: {
        visibleDesktop
    }
}) => {
    const showButton = useIsScrolledPassedWindowHeight();
    return (
        <div {...n('wrapper').withTestId().props}>
            <ButtonPageScroll
                {...n('button').withTestId().props}
                hiddenText
                hiddenButton={!showButton}
                mobileOnly={!visibleDesktop}
            />
        </div>
    );
};

StickyButtonPageScroll.schema = () => ({
    name: 'StickyButtonPageScroll',
    title: 'uieditor.sfbComponent.stickyButtonPageScroll.title',
    iconName: 'button',
    form: {
        visibleDesktop: {
            type: TOGGLE,
            required: true,
            defaultValue: false,
            labelOn: 'uieditor.sfbComponent.stickyButtonPageScroll.visibleDesktop.labelOn',
            labelOff: 'uieditor.sfbComponent.stickyButtonPageScroll.visibleDesktop.labelOff',
            caption: 'uieditor.sfbComponent.stickyButtonPageScroll.visibleDesktop.caption'
        }
    }
});


StickyButtonPageScroll.propTypes = {
    settings: PropTypes.shape({
        visibleDesktop: PropTypes.shape({
            value: PropTypes.bool
        })
    })
};
StickyButtonPageScroll.defaultProps = {
    settings: {
        visibleDesktop: {
            value: false
        }
    }
};

export default StickyButtonPageScroll;
