import { Avatar } from '@app/client/components/ui/avatar';
import { Button, Icon, Stack, Textarea } from '@chakra-ui/react';
import { useState } from 'react';

export function ReviewInput({
  username,
  onReviewSubmit
}: {
  readonly username: string;
  readonly onReviewSubmit: (text: string) => Promise<void>;
}) {
  const [text, setText] = useState<string>('');
  return (
    <Stack direction="row" alignItems="start">
      <Avatar size="sm" fallback={username[0]} />
      <Stack width="100%" position="relative" borderRadius="md">
        <Textarea
          variant="subtle"
          placeholder="Write your review here..."
          resize="none"
          maxLength={700}
          maxLines={10}
          fontSize="md"
          autoresize
          value={text}
          onChange={event => setText(event.target.value)}
        />
        <Button
          size="sm"
          position="absolute"
          right="2px"
          bottom="5px"
          padding={0}
          variant="ghost"
          onClick={async () => {
            await onReviewSubmit(text);
            setText('');
          }}
        >
          <Icon>
            <i className="nf nf-fa-send" />
          </Icon>
        </Button>
      </Stack>
    </Stack>
  );
}