import { FC } from 'react';
import { BackHeader, Button, Container, SafeScreen, ScrollView, Text, Visible } from 'components';
import { Add, ChatFill } from 'icons';
import { RootStackScreenProps } from 'navigation';
import { NavigationRoutes } from 'navigation/enum';
import { Edit } from 'components/profile';

export const EditProfile: FC<EditProfileType> = ({}) => {
  return (
    <SafeScreen edges={['top']}>
      <BackHeader
        isBack={true}
        leftElement={
          <Container ml="xs">
            <Text variant="title">My Profile</Text>
          </Container>
        }
      />
      <ScrollView>
        <Edit setIsEdit={undefined} userId="12345qwerty" />
      </ScrollView>
      <Visible if={false}>
        <>
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="primary"
            sizeVariant="extra-large"
            titleColor="primary"
            rightElement={<ChatFill height="15" width="15" colorVariant="primary" />}
            title="Create Direct Room"
          />
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="primary"
            sizeVariant="extra-large"
            titleColor="primary"
            rightElement={<Add height="15" width="15" colorVariant="primary" />}
            title="Add to Space"
          />
          <Button
            mx="s"
            my="2xs"
            variant="outline"
            colorVariant="caption"
            sizeVariant="extra-large"
            title="Report User"
          />
        </>
      </Visible>
    </SafeScreen>
  );
};
type EditProfileType = RootStackScreenProps<NavigationRoutes.Profile> & ProfileProps;
interface ProfileProps {
  userId: string;
}