import React, { useState } from 'react'
import { Button, Card, Col, type MenuProps, Row, Avatar } from 'antd'
import startStyles from '../backLogList.less'
import {
    UsergroupDeleteOutlined,
    FieldTimeOutlined,
    UnorderedListOutlined,
    PaperClipOutlined,
    CommentOutlined,
    UserOutlined,
} from '@ant-design/icons'
import DropdownMenu from '../../../Components/DropDown'
import DescriptinSection from './DescriptinSection'
import EventForm from '../TaskCreate/EventForm'

const AddTask = (props: any & { taskId: string }): React.ReactElement => {
    const { taskId } = props
    const [activeComponent, setActiveComponent] = useState('Attachment')

    const renderComponent = (): JSX.Element | null => {
        switch (activeComponent) {
            case 'Attachment':
                return (
                    <div>
                        <DescriptinSection />
                    </div>
                )
            case 'SubTask':
                return (
                    <div>
                        <span>Add Sub Task Component</span>
                    </div>
                )
            case 'StartWork':
                return (
                    <div style={{ width: '100%' }}>
                        <EventForm taskId={taskId} />
                    </div>
                )
            case 'SwitchUser':
                return (
                    <div>
                        <span>Switch User Component</span>
                    </div>
                )
            case 'StaffCommunication':
                return (
                    <div>
                        {/* Component for Staff Communication */}
                        <span>Staff Communication Component</span>
                    </div>
                )
            default:
                return null
        }
    }

    const items: MenuProps['items'] = [
        {
            label: <a href="https://www.antgroup.com">1st menu item</a>,
            key: '0',
        },
        {
            label: <a href="https://www.aliyun.com">2nd menu item</a>,
            key: '1',
        },
        {
            type: 'divider',
        },
        {
            label: '3rd menu item',
            key: '3',
        },
    ]

    return (
        <div>
            <Row>
                <Col span={14}>
                    {' '}
                    <Card
                        className={startStyles.addTaskCard}
                        title="Sub Title"
                        headStyle={{ border: 'none' }}
                    >
                        <Row gutter={[8, 8]}>
                            <Col
                                span={4}
                                className={startStyles.addTaskIconCol}
                            >
                                <Button
                                    type="default"
                                    style={{ backgroundColor: 'gray' }}
                                    onClick={() => {
                                        setActiveComponent('Attachment')
                                    }}
                                >
                                    <PaperClipOutlined
                                        className={startStyles.addTaskIcon}
                                    />
                                    <span>Attachment</span>
                                </Button>
                            </Col>

                            <Col
                                span={4}
                                className={startStyles.addTaskIconCol}
                            >
                                <Button
                                    type="default"
                                    style={{ backgroundColor: 'gray' }}
                                    onClick={() => {
                                        setActiveComponent('SubTask')
                                    }}
                                >
                                    <UnorderedListOutlined
                                        className={startStyles.addTaskIcon}
                                    />
                                    <span>Add Sub Task</span>
                                </Button>
                            </Col>
                            <Col
                                span={4}
                                className={startStyles.addTaskIconColField}
                            >
                                <Button
                                    type="default"
                                    style={{ backgroundColor: 'gray' }}
                                    onClick={() => {
                                        setActiveComponent('StartWork')
                                    }}
                                >
                                    <FieldTimeOutlined
                                        className={startStyles.addTaskIcon}
                                    />
                                    <span>Start Work</span>
                                </Button>
                            </Col>
                            <Col
                                span={4}
                                className={startStyles.addTaskIconColSwitch}
                            >
                                <Button
                                    type="default"
                                    style={{ backgroundColor: 'gray' }}
                                    onClick={() => {
                                        setActiveComponent('SwitchUser')
                                    }}
                                >
                                    <UsergroupDeleteOutlined
                                        className={startStyles.addTaskIcon}
                                    />
                                    <span>Switch User</span>
                                </Button>
                            </Col>
                            <Col
                                span={7}
                                className={startStyles.addTaskIconColStaff}
                            >
                                <Button
                                    type="default"
                                    style={{ backgroundColor: 'gray' }}
                                    onClick={() => {
                                        setActiveComponent('StaffCommunication')
                                    }}
                                >
                                    {' '}
                                    <CommentOutlined
                                        className={startStyles.addTaskIcon}
                                    />{' '}
                                    staff Communication
                                </Button>
                            </Col>
                        </Row>
                        <Row>{renderComponent()}</Row>
                    </Card>
                </Col>
                <Col span={10}>
                    {' '}
                    <Card
                        className={startStyles.addTaskCard}
                        headStyle={{ border: 'none' }}
                    >
                        <Row>
                            <Col span={4}>
                                {' '}
                                <DropdownMenu
                                    items={items}
                                    buttonName="Assignee"
                                />
                            </Col>
                            <Col span={6}>
                                {' '}
                                <DropdownMenu
                                    items={items}
                                    buttonName="Move Sprint"
                                />
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <span>Assignee</span>
                            </Col>
                            <Col span={6}>
                                {' '}
                                <Avatar
                                    size={30}
                                    icon={<UserOutlined />}
                                    // src={user.avatar}
                                />
                                <span>Sajee</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <span>Labels</span>
                            </Col>
                            <Col span={6}>
                                <span>none</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <span>Sprint</span>
                            </Col>
                            <Col span={6}>
                                <span>none</span>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <span>Reporter</span>
                            </Col>
                            <Col span={6}>
                                {' '}
                                <Avatar
                                    size={30}
                                    icon={<UserOutlined />}
                                    // src={user.avatar}
                                />
                                <span>Sajee</span>
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default AddTask
