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

import Button from '@material-hu/components/design-system/Buttons/Button';

import FormRichEditor from 'src/components/dashboard/form/formDetail/inputs/FormRichEditor';

type SummaryEditorProps = {
  userId?: number;
  summary?: string;
  saveSummary?: () => void;
  isSavingSummary?: boolean;
  placeholder: string;
  saveLabel: string;
};

const SummaryEditor = ({
  userId,
  summary,
  saveSummary,
  isSavingSummary,
  placeholder,
  saveLabel,
}: SummaryEditorProps) => (
  <>
    <FormRichEditor
      key={userId}
      placeholder={placeholder}
      name="summary"
      defaultValue={summary}
    />
    {saveSummary && (
      <Stack sx={{ alignItems: 'flex-end' }}>
        <Button
          onClick={saveSummary}
          variant="primary"
          sx={{ mt: 1 }}
          loading={isSavingSummary}
          disabled={isSavingSummary}
        >
          {saveLabel}
        </Button>
      </Stack>
    )}
  </>
);

export default SummaryEditor;
