import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import Stack from '@mui/material/Stack';
import { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { Smiley as SmileyIcon } from '@phosphor-icons/react/dist/ssr/Smiley';

import type { User } from '@/types/user';

const user = {
  id: 'USR-000',
  name: 'Sofia Rivers',
  avatar: '/assets/avatar.png',
  email: 'sofia@devias.io',
} satisfies User;

export function CommentAdd(): React.JSX.Element {
  return (
    <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
      <Avatar src={user.avatar} />
      <Stack spacing={3} sx={{ flex: '1 1 auto' }}>
        <OutlinedInput multiline placeholder="Add a comment" rows={3} />
        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <IconButton sx={{ display: { sm: 'none' } }}>
              <PlusIcon />
            </IconButton>
            <IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
              <ImageIcon />
            </IconButton>
            <IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
              <PaperclipIcon />
            </IconButton>
            <IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
              <SmileyIcon />
            </IconButton>
          </Stack>
          <div>
            <Button variant="contained">Send</Button>
          </div>
        </Stack>
      </Stack>
    </Stack>
  );
}