import { FC, useCallback, useEffect } from 'react';
import { Add, ChatFill, Pin } from 'icons';
import { NavigationRoutes } from 'navigation/enum';
import { useProfile, useResponsiveLayout, useRouting } from 'hooks';
import { Divider } from 'components/divider';
import { Avatar } from 'components/avatar';
import { Button } from 'components/button';
import { Col, Container, Row, ScrollView } from 'components/layout';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { useOneUserLazyQuery } from 'expo-schema';

export const Inner: FC<InnerProps> = ({ userId, setIsEdit }) => {
  const { navigateTo } = useRouting();
  const { isHandHeld, isMobile } = useResponsiveLayout();
  const { profile: userProfile } = useProfile();

  const isUser = !!userId;
  const [onUser, { loading: isLoading, data: oneUserData }] = useOneUserLazyQuery({
    variables: {
      oneUserId: userId,
    },
  });

  useEffect(() => {
    if (isUser) {
      onUser();
    }
  }, [onUser, isUser]);

  const navigateToEdit = useCallback(() => {
    if (isHandHeld) {
      navigateTo(NavigationRoutes.EditProfile);
    } else {
      if (setIsEdit) {
        setIsEdit(true);
      }
    }
  }, [isHandHeld, navigateTo, setIsEdit]);

  const profile = userId ? oneUserData?.oneUser : userProfile;

  const alignSelf = isMobile ? 'auto' : 'flex-end';

  return (
    <>
      <ScrollView p="s">
        <Row alignItems="center">
          <Avatar colorVariant="base-01" uri={profile?.profilePhotoUrl as string} size={120} />
          <Col ml="m" flexShrink={1}>
            <Row>
              <Text variant="title">
                {profile?.name.first} {profile?.name.last}
              </Text>
            </Row>
            <Row mt="3xs">
              <Text variant="body" color="body">
                {profile?.pronouns}
              </Text>
            </Row>
            <Row mt="xs">
              <Pin colorVariant="primary" style={{ marginLeft: -2 }} />
              <Text ml="3xs" variant="body" color="primary">
                {profile?.location}
              </Text>
            </Row>
          </Col>
        </Row>

        <Col mt="l">
          <Row>
            <Text variant="body" color="body">
              Bio
            </Text>
          </Row>
          <Col mt="xs">
            <Text variant="body" color="title">
              {profile?.about}
            </Text>
          </Col>
        </Col>
      </ScrollView>
      <Visible if={!isMobile}>
        <Container>
          <Divider mx="s" directionVariant="horizontal" colorVariant="divider-02" />
        </Container>
      </Visible>
      <Visible if={isUser}>
        <>
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="title"
            sizeVariant="extra-large"
            titleColor="title"
            rightElement={<ChatFill height="15" width="15" colorVariant="title" />}
            title="Create Direct Room"
          />
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="title"
            sizeVariant="extra-large"
            titleColor="title"
            rightElement={<Add height="15" width="15" colorVariant="title" />}
            title="Add to Space"
          />
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="caption"
            sizeVariant="extra-large"
            title="Report User"
          />
        </>
      </Visible>
      <Visible if={!isUser}>
        <Button
          alignSelf={alignSelf}
          mx="s"
          my="m"
          onPress={navigateToEdit}
          loading={isLoading}
          colorVariant="primary"
          titleColor="white"
          sizeVariant="large"
          title="Edit Profile"
        />
      </Visible>
    </>
  );
};
interface InnerProps {
  userId: string;
  setIsEdit: ((value: boolean) => void) | null;
}