import Stack from '@material-hu/mui/Stack';

import FormIconPicker from '@material-hu/components/composed-components/IconPicker/form';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import Title from '@material-hu/components/design-system/Title';

import { ARTICLE_TITLE_MAX_LENGTH } from 'src/pages/dashboard/HuLibraries/constants';
import { useArticleIcons } from 'src/pages/dashboard/HuLibraries/hooks/useArticleIcons';
import { useArticleId } from 'src/pages/dashboard/HuLibraries/hooks/useArticleId';
import { useUploadArticleIcon } from 'src/pages/dashboard/HuLibraries/hooks/useUploadArticleIcon';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const ArticleEditTitle = () => {
  const { t } = useLokaliseTranslation('libraries');
  const { articleId } = useArticleId();
  const { icons } = useArticleIcons(articleId);
  const uploadIcon = useUploadArticleIcon(articleId);

  const handleUpload = (file: File) => uploadIcon.mutate({ file });

  return (
    <CardContainer fullWidth>
      <Title
        variant="S"
        fontWeight="fontWeightSemiBold"
        title={t('article.icon_and_name')}
        sx={{ mb: 2 }}
      />
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
        <FormIconPicker
          name="icon"
          inputProps={{
            sx: { alignSelf: 'flex-start' },
            imageOptions: icons,
            onUpload: handleUpload,
            text: {
              iconsTab: t('web_only:form_inputs.icons'),
              emojisTab: t('web_only:form_inputs.emojis'),
              cropTitle: t('web_only:form_inputs.crop_icon'),
              cropSave: t('general:save'),
              cropCancel: t('general:cancel'),
            },
          }}
        />
        <Stack sx={{ flex: 1 }}>
          <FormInputClassic
            name="title"
            inputProps={{
              placeholder: t('article.title'),
              maxLength: ARTICLE_TITLE_MAX_LENGTH,
              fullWidth: true,
            }}
          />
        </Stack>
      </Stack>
    </CardContainer>
  );
};
