import { FC, useCallback, useState } from 'react';
import { useReactiveVar } from '@apollo/client';
import { UnderLay, Visible, Fab, Divider, Card, Heading } from 'components';
import { Close } from 'icons';
import { isProfileOpenVar } from 'state-management/dialogs';
import { Edit, Inner } from 'components/profile';

export const Profile: FC = () => {
  const isProfileOpen = useReactiveVar(isProfileOpenVar);
  const [isEdit, setIsEdit] = useState(false);
  const title = isEdit ? 'Edit Profile' : 'My Profile';

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

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

          <Visible if={isEdit}>
            <Edit userId="123456789qwerty" setIsEdit={setIsEdit} />
          </Visible>
          <Visible if={!isEdit}>
            <Inner userId={''} setIsEdit={setIsEdit} />
          </Visible>
        </Card>
      </UnderLay>
    </Visible>
  );
};