import { FC, useCallback, useEffect, useState } from 'react';
import { Col, Container, Row, TouchableHighlight } from 'components/layout';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { Divider } from 'components/divider';
import { Avatar } from 'components/avatar';
import { Button } from 'components/button';
import { TextField } from 'components/text-field';
import { useProfile, useResponsiveLayout } from 'hooks';
import { Formik } from 'formik';
import { isProfileOpenVar } from 'state-management/dialogs';
import { useUpdateUserMutation } from 'expo-schema';

export const Edit: FC<EditProps> = ({ userId, setIsEdit }) => {
  const { isMobile } = useResponsiveLayout();
  const { profile } = useProfile();

  const [id, setId] = useState<string | undefined>();
  const [updateUser] = useUpdateUserMutation({});

  const direction = isMobile ? 'column' : 'row';
  const ml = isMobile ? undefined : 'l';
  const mt = isMobile ? 'l' : undefined;
  const px = isMobile ? 's' : 'l';
  const mtTextField = isMobile ? 'xs' : undefined;

  useEffect(() => {
    setId(userId);
  }, [userId]);

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

  return (
    <TouchableHighlight underlayColor="transparent" onPress={() => {}}>
      <Formik
        initialValues={{
          firstName: profile?.name.first,
          lastName: profile?.name.last,
          location: profile?.location,
          pronouns: profile?.pronouns,
          about: profile?.about,
        }}
        onSubmit={(values) =>
          updateUser({
            variables: {
              input: {
                id: id as string,
                ...values,
              },
            },
          })
        }
      >
        {({ handleChange, handleBlur, handleSubmit, values }) => (
          <>
            <Container px={px} py="l" flexDirection={direction}>
              <Container>
                <Avatar
                  editable
                  colorVariant="base-01"
                  uri="https://avatars.githubusercontent.com/u/98377997"
                  size={120}
                />
              </Container>

              <Container flexGrow={1} ml={ml} mt={mt}>
                <Container flexDirection={'column'} flexGrow={1} justifyContent="space-between">
                  <Container flexDirection={direction}>
                    <Col flexGrow={1}>
                      <Text mt={mtTextField} mb="xs" variant="caption">
                        First Name
                      </Text>
                      <TextField
                        variant="outline"
                        sizeVariant="small"
                        colorVariant="base-02"
                        shapeVariant="round"
                        onBlur={handleBlur('firstName')}
                        onChangeText={handleChange('firstName')}
                        value={values.firstName}
                      />
                    </Col>
                    <Container px="xs" />
                    <Col flexGrow={1}>
                      <Text mt={mtTextField} mb="xs" variant="caption">
                        Last Name
                      </Text>
                      <TextField
                        variant="outline"
                        sizeVariant="small"
                        colorVariant="base-02"
                        shapeVariant="round"
                        onBlur={handleBlur('lastName')}
                        onChangeText={handleChange('lastName')}
                        value={values.lastName}
                      />
                    </Col>
                  </Container>
                  <Container flexDirection={direction}>
                    <Col flexGrow={1}>
                      <Text mt="m" mb="xs" variant="caption">
                        Pronouns
                      </Text>
                      <TextField
                        variant="outline"
                        sizeVariant="small"
                        colorVariant="base-02"
                        shapeVariant="round"
                        onBlur={handleBlur('pronouns')}
                        onChangeText={handleChange('pronouns')}
                        value={values.pronouns as string}
                      />
                    </Col>
                    <Container px="xs" />

                    <Col flexGrow={1}>
                      <Text mt="m" mb="xs" variant="caption">
                        Location
                      </Text>
                      <TextField
                        variant="outline"
                        sizeVariant="small"
                        colorVariant="base-02"
                        shapeVariant="round"
                        onBlur={handleBlur('location')}
                        onChangeText={handleChange('location')}
                        value={values.location as string}
                      />
                    </Col>
                  </Container>
                </Container>
                <Col mt="s">
                  <Text mb="xs" variant="caption">
                    Bio
                  </Text>
                  <TextField
                    variant="outline"
                    shapeVariant="round"
                    colorVariant="base-02"
                    sizeVariant="content"
                    height={70}
                    multiline={true}
                    numberOfLines={4}
                    onBlur={handleBlur('about')}
                    onChangeText={handleChange('about')}
                    value={values.about as string}
                  />
                </Col>
              </Container>
            </Container>
            <Visible if={!isMobile}>
              <Divider mx={px} directionVariant="horizontal" colorVariant="divider-02" />
            </Visible>
            <Row px={px} py="m" alignItems="center" justifyContent="space-between">
              <Visible if={true}>
                <>
                  <Row>
                    <Button
                      colorVariant="base-02"
                      sizeVariant="medium"
                      title="Cancel"
                      titleColor="body"
                      onPress={closeDialog}
                    />
                  </Row>
                  <Row>
                    <Button
                      width={123}
                      onPress={() => handleSubmit()}
                      loading={false}
                      colorVariant="primary"
                      sizeVariant="medium"
                      title="Save Changes"
                    />
                  </Row>
                </>
              </Visible>
            </Row>
          </>
        )}
      </Formik>
    </TouchableHighlight>
  );
};

interface EditProps {
  userId?: string;
  setIsEdit?: (value: boolean) => void;
}