import React, { useCallback, useEffect } from 'react';
import { Box, Text, Chip } from 'folds';
import { useTranslation } from 'react-i18next';
import { SettingTile } from '../../../components/setting-tile';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { SettingsSection } from '../SettingsSection';
import { Mono } from '../styles.css';

export function ContactInformation() {
  const { t } = useTranslation();
  const mx = useMatrixClient();
  const [threePIdsState, loadThreePIds] = useAsyncCallback(
    useCallback(() => mx.getThreePids(), [mx])
  );
  const threePIds =
    threePIdsState.status === AsyncStatus.Success ? threePIdsState.data.threepids : undefined;

  const emailIds = threePIds?.filter((id) => id.medium === 'email');

  useEffect(() => {
    loadThreePIds();
  }, [loadThreePIds]);

  return (
    <SettingsSection label={t('Settings.contact_info')}>
      <SettingTile
        title={t('Settings.email_address')}
        description={t('Settings.email_address_desc')}
      >
        <Box wrap="Wrap" gap="200">
          {emailIds?.map((email) => (
            <Chip key={email.address} as="span" variant="Secondary" radii="Pill">
              <Text size="T200" className={Mono}>
                {email.address}
              </Text>
            </Chip>
          ))}
        </Box>
      </SettingTile>
    </SettingsSection>
  );
}
