import React from 'react';
import {Box, Button, Heading, SwitchSynced} from '@airtable/blocks/ui';
import {FieldType} from '@airtable/blocks/models';
import PropTypes from 'prop-types';

import FullscreenBox from './FullscreenBox';
import {ConfigKeys} from './settings';

/**
 * Settings form component.
 * Allows the user to toggle link types.
 *
 * @param {Function} props.setShouldShowSettings Function to toggle settings visibility
 */
export default function SettingsForm({setShouldShowSettings}) {
    return (
        <FullscreenBox
            left="initial" // show settings in right sidebar
            width="360px"
            backgroundColor="white"
            display="flex"
            flexDirection="column"
            borderLeft="thick"
        >
            <Box flex="auto" display="flex" justifyContent="center" overflow="auto">
                <Box paddingTop={4} paddingBottom={2} maxWidth={300} flex="auto">
                    <Heading marginBottom={2}>Settings</Heading>
                    <SwitchSynced
                        marginY={3}
                        label="Show linked record relationships"
                        globalConfigKey={[
                            ConfigKeys.ENABLED_LINKS_BY_TYPE,
                            FieldType.MULTIPLE_RECORD_LINKS,
                        ]}
                    />
                    <SwitchSynced
                        marginY={3}
                        label="Show formula relationships"
                        globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.FORMULA]}
                    />
                    <SwitchSynced
                        marginY={3}
                        label="Show rollup relationships"
                        globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.ROLLUP]}
                    />
                    <SwitchSynced
                        marginY={3}
                        label="Show lookup relationships"
                        globalConfigKey={[
                            ConfigKeys.ENABLED_LINKS_BY_TYPE,
                            FieldType.MULTIPLE_LOOKUP_VALUES,
                        ]}
                    />
                    <SwitchSynced
                        marginY={3}
                        label="Show count relationships"
                        globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.COUNT]}
                    />
                </Box>
            </Box>
            <Box
                flex="none"
                borderTop="thick"
                display="flex"
                justifyContent="flex-end"
                alignItems="center"
            >
                <Button
                    margin={3}
                    variant="primary"
                    size="large"
                    onClick={() => setShouldShowSettings(false)}
                >
                    Done
                </Button>
            </Box>
        </FullscreenBox>
    );
}

SettingsForm.propTypes = {
    setShouldShowSettings: PropTypes.func.isRequired,
};