import { Avatar, Fab, Checkbox, Text } from 'components';
import { Container, Row, TouchableHighlight, TouchableWithoutFeedback } from 'components/layout';
import { MyProfileFragment } from 'expo-schema';
import { useProfile } from 'hooks';
import { Add, Close } from 'icons';
import { FC, useCallback } from 'react';

export const PreferredEmail: FC<PreferredEmailProps> = ({ handleUpdate }) => {
  const { profile } = useProfile();
  const isPreferred = useCallback(
    (email: string) => {
      return email === profile?.preferredEmail;
    },
    [profile?.preferredEmail]
  );
  const getColor = useCallback(
    (email: string) => {
      return email === profile?.preferredEmail ? 'title' : 'body';
    },
    [profile?.preferredEmail]
  );

  const handleChangeEmail = useCallback(
    (email: string) => {
      handleUpdate({ preferredEmail: email } as MyProfileFragment);
    },
    [handleUpdate]
  );

  return (
    <Container mb="s">
      {profile?.emails.map(({ email }) => {
        return (
          <TouchableHighlight pb="xs" key={email}>
            <Row alignItems="center" justifyContent="space-between">
              <TouchableWithoutFeedback onPress={() => handleChangeEmail(email)}>
                <Row alignItems="center">
                  <Checkbox
                    onPress={() => handleChangeEmail(email)}
                    shapeVariant="circle"
                    isActive={isPreferred(email)}
                    sizeVariant="2-extra-small"
                    colorVariant="success"
                  />
                  <Avatar
                    ml="xs"
                    sizeVariant="extra-small"
                    titleColor="title"
                    titleVariant="label"
                    colorVariant="base-02"
                    title={email}
                  />
                  <Text ml="xs" weightVariant="normal" variant="caption" color={getColor(email)}>
                    {email}
                  </Text>
                </Row>
              </TouchableWithoutFeedback>
              <Fab
                colorVariant="transparent"
                variant="plain"
                centerElement={<Close height={8} width={8} />}
              />
            </Row>
          </TouchableHighlight>
        );
      })}
      <TouchableHighlight pb="xs">
        <Row alignItems="center">
          <Checkbox isActive={false} sizeVariant="2-extra-small" colorVariant="transparent" />
          <Row ml="xs" alignItems="center">
            <Fab
              colorVariant="transparent"
              variant="outline-dashed"
              sizeVariant="extra-small"
              hoverColorVariant="base-02"
              centerElement={<Add height={10} width={10} colorVariant="caption" />}
            />
            <Text ml="xs" weightVariant="normal" variant="caption">
              Add New Email
            </Text>
          </Row>
        </Row>
      </TouchableHighlight>
    </Container>
  );
};
type PreferredEmailProps = {
  handleUpdate: (profile: MyProfileFragment) => void;
};