import React, { useState } from 'react';
import { mdiImageOutline, mdiVideoOutline, mdiEmoticonOutline, mdiSend } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import UserAvatarCurrentUser from '../UserAvatarCurrentUser';
import { useAppDispatch } from '../../stores/hooks';
import { create as createPost } from '../../stores/posts/postsSlice';
import BaseButton from '../BaseButton';

const CreatePost = ({ onPostCreated }: { onPostCreated: () => void }) => {
  const dispatch = useAppDispatch();
  const [caption, setCaption] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!caption.trim()) return;
    
    setLoading(true);
    try {
      await dispatch(createPost({
        caption,
        post_type: 'text',
        visibility: 'public',
        published_at: new Date().toISOString()
      }));
      setCaption('');
      onPostCreated();
    } catch (error) {
      console.error('Failed to create post', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-4 mb-6 border border-gray-100 dark:border-dark-700">
      <div className="flex items-start space-x-3">
        <UserAvatarCurrentUser className="w-10 h-10 mt-1" />
        <div className="flex-1">
          <textarea
            className="w-full bg-gray-50 dark:bg-dark-900 border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-indigo-500 transition-shadow resize-none min-h-[100px]"
            placeholder="What's on your mind?"
            value={caption}
            onChange={(e) => setCaption(e.target.value)}
          />
          
          <div className="flex items-center justify-between mt-3">
            <div className="flex items-center space-x-4">
              <button className="text-gray-500 hover:text-indigo-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
                <BaseIcon path={mdiImageOutline} size="22" />
              </button>
              <button className="text-gray-500 hover:text-rose-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
                <BaseIcon path={mdiVideoOutline} size="22" />
              </button>
              <button className="text-gray-500 hover:text-yellow-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
                <BaseIcon path={mdiEmoticonOutline} size="22" />
              </button>
            </div>
            
            <BaseButton
              label="Post"
              color="info"
              icon={mdiSend}
              small
              disabled={!caption.trim() || loading}
              onClick={handleSubmit}
              loading={loading}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default CreatePost;
