import { useNavigation } from '@react-navigation/core';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
  Avatar,
  Button,
  Card,
  Divider,
  List,
  useTheme,
} from 'react-native-paper';
import Urls from '../../../constants/Urls';
import { ProfileDataType } from '../../../screens/Amicale/ProfileScreen';
import i18n from 'i18n-js';

type Props = {
  profile?: ProfileDataType;
};

const styles = StyleSheet.create({
  card: {
    margin: 10,
  },
  icon: {
    backgroundColor: 'transparent',
  },
  editButton: {
    marginLeft: 'auto',
  },
  mascot: {
    width: 60,
  },
  title: {
    marginLeft: 10,
  },
});

function getFieldValue(field?: string): string {
  return field ? field : i18n.t('screens.profile.noData');
}

export default function ProfilePersonalCard(props: Props) {
  const { profile } = props;
  const theme = useTheme();
  const navigation = useNavigation();

  function getPersonalListItem(field: string | undefined, icon: string) {
    const title = field != null ? getFieldValue(field) : ':(';
    const subtitle = field != null ? '' : getFieldValue(field);
    return (
      <List.Item
        title={title}
        description={subtitle}
        left={(leftProps) => (
          <List.Icon
            style={leftProps.style}
            icon={icon}
            color={field != null ? leftProps.color : theme.colors.textDisabled}
          />
        )}
      />
    );
  }

  return (
    <Card style={styles.card}>
      <Card.Title
        title={`${profile?.first_name} ${profile?.last_name}`}
        subtitle={profile?.email}
        left={(iconProps) => (
          <Avatar.Icon
            size={iconProps.size}
            icon="account"
            color={theme.colors.primary}
            style={styles.icon}
          />
        )}
      />
      <Card.Content>
        <Divider />
        <List.Section>
          <List.Subheader>
            {i18n.t('screens.profile.personalInformation')}
          </List.Subheader>
          {getPersonalListItem(profile?.birthday, 'cake-variant')}
          {getPersonalListItem(profile?.phone, 'phone')}
          {getPersonalListItem(profile?.email, 'email')}
          {getPersonalListItem(profile?.branch, 'school')}
        </List.Section>
        <Divider />
        <Card.Actions>
          <Button
            icon="account-edit"
            mode="contained"
            onPress={() => {
              navigation.navigate('website', {
                host: Urls.websites.amicale,
                path: profile?.link,
                title: i18n.t('screens.websites.amicale'),
              });
            }}
            style={styles.editButton}
          >
            {i18n.t('screens.profile.editInformation')}
          </Button>
        </Card.Actions>
      </Card.Content>
    </Card>
  );
}