import { FC, useCallback } from 'react';
import { useReactiveVar } from '@apollo/client';
import { UnderLay, Visible, Fab, Divider, Card, Heading } from 'components';
import { Close } from 'icons';
import { isSettingOpenVar } from 'state-management/dialogs';
import { Root } from 'components/settings';

export const Setting: FC = () => {
  const isSettingOpen = useReactiveVar(isSettingOpenVar);

  const closeDialog = useCallback(() => {
    isSettingOpenVar(false);
  }, []);

  return (
    <Visible if={isSettingOpen}>
      <UnderLay
        alignItems="center"
        justifyContent="center"
        isActive={isSettingOpen}
        setIsActive={closeDialog}
      >
        <Card width={600} variant="plain" colorVariant="base">
          <Heading
            px="s"
            height={50}
            title={'Preferences'}
            isAction={true}
            action={
              <Fab
                onPress={closeDialog}
                sizeVariant="medium"
                variant="plain"
                colorVariant="transparent"
                centerElement={<Close colorVariant="title" />}
              />
            }
          />
          <Divider directionVariant="horizontal" colorVariant="divider-02" />
          <Root />
        </Card>
      </UnderLay>
    </Visible>
  );
};