import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { PageWrapper } from '../PageWrapper';
import SocialMediaList from './socialMedia/SocialMediaList';
import SocialMediaMenu from './socialMedia/SocialMediaMenu';
import SocialMediaDialog from './socialMedia/SocialMediaDialog';
import useMediaQuery from '@mui/material/useMediaQuery';
import type { Theme } from '@mui/material/styles';

export function SocialMedia() {
  const { t } = useTranslation('profileSetting');

  const [openDialog, setOpenDialog] = useState(false);
  const [emailInput, setEmailInput] = useState('');
  const [emailError, setEmailError] = useState(false);

  const fullScreen = useMediaQuery((theme: Theme) =>
    theme.breakpoints.down('sm'),
  );
  const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
  const computedMaxWidth = (fullScreen ? 'xs' : downMd ? 'sm' : 'md') as
    | 'xs'
    | 'sm'
    | 'md'
    | 'lg'
    | 'xl';

  const emailList = [
    { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
    { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
    { email: 'emailtemp@icloud.com', provider: 'apple', time: '1 ماه پیش' },
  ] as const;

  return (
    <PageWrapper>
      <CardContainer
        title={t('settingForm.titleSocial')}
        subtitle={t('settingForm.descriptionSocial')}
        action={
          <SocialMediaMenu t={t} onOpenDialog={() => setOpenDialog(true)} />
        }
      >
        <SocialMediaList t={t} emailList={emailList} />
        <SocialMediaDialog
          open={openDialog}
          onClose={() => setOpenDialog(false)}
          t={t}
          emailInput={emailInput}
          setEmailInput={setEmailInput}
          emailError={emailError}
          setEmailError={setEmailError}
          fullScreen={fullScreen}
          computedMaxWidth={computedMaxWidth}
        />
      </CardContainer>
    </PageWrapper>
  );
}