import React from 'react';
import { Nav, Row, Col, Drawer, Message, Divider, Tooltip, Whisper, Button, Placeholder, Stack, Notification, useToaster, Progress } from 'rsuite';
import CodeSnippet from '@/components/dashboard/codeSnippet';
import ProgressQuota from '@/components/dashboard/progressQuota';
import Callout from '@/components/dashboard/callout';
import { DocumentInfo, DrawerRowData } from '@/lib/utils/types';
import AbTestIcon from '@rsuite/icons/AbTest';
import { userAtom } from '@/lib/context/user';
import { useAtom } from 'jotai';
import { withUser } from '../withUser';


interface DashboardDrawerProps {
  open: boolean
  setOpen: React.Dispatch<React.SetStateAction<boolean>>
  rowData: DrawerRowData
  userId: string
}


const DashboardDrawer: React.FC<DashboardDrawerProps> = (props) => {
  const { open, setOpen, rowData, userId } = props;
  const toaster = useToaster();
  const [user] = useAtom(userAtom);

  return (
    <Drawer
      size='md'
      backdrop={true}
      open={open}
      onClose={() => setOpen(false)}
    >
      <Drawer.Header>
        <Drawer.Title>{rowData.name}</Drawer.Title>
      </Drawer.Header>
      <Drawer.Body style={{ padding: 0 }}>

        <Stack
          direction='column'
          alignItems='stretch'
          divider={<Divider />}
        >
          <Stack.Item>
            <Callout rowData={rowData} />
            {/* <Message showIcon type={rowData.status} header={capitalizeFirstLetter(rowData.status)}>
              This is a warning notice about copywriting.
            </Message> */}
          </Stack.Item>

          <Stack.Item>
            <Stack spacing={8} direction='column' alignItems='stretch'
              style={{ padding: 24 }}
            >
              <Stack.Item>
                <h3>Details</h3>
              </Stack.Item>

              <Stack.Item>
                <Whisper
                  trigger="hover"
                  placement='top'
                  controlId={`control-id-top`}
                  speaker={
                    <Tooltip>
                      API Endpoint<br /> Click to copy
                    </Tooltip>
                  }
                >
                  <Button startIcon={<AbTestIcon />} appearance={'subtle'} onClick={
                    () => {
                      navigator.clipboard.writeText(`https://www.sspi.com/api/v1/${rowData.id}`);
                      toaster.push(
                        <Notification>API Endpoint copied to clipboard</Notification>,
                        { placement: 'bottomEnd' }
                      );
                    }
                  }>
                    https://www.sspi.com/api/v1/{rowData.id}
                  </Button>
                </Whisper>
              </Stack.Item>
            </Stack>
          </Stack.Item>


          <Stack.Item>
            <Stack spacing={8} direction='column' alignItems='stretch'
              style={{ padding: 24 }}
            >
              <Stack.Item>
                <h3>Size</h3>
              </Stack.Item>

              <Stack.Item>
                <ProgressQuota total={10} used={rowData.nbColumns} label="Column" />
                <ProgressQuota total={1000} used={rowData.nbRows} label="Rows" />
                <ProgressQuota total={100} used={rowData.size} label="Size" />
              </Stack.Item>
            </Stack>
          </Stack.Item>

          <Stack.Item>
            {withUser(user, (user) =>
              <CodeSnippet
                userId={userId}
                userKey={user.apiKey}
                documentInfo={rowData as DocumentInfo} />
            )}
          </Stack.Item>
        </Stack>
        <Placeholder.Paragraph />
      </Drawer.Body>
    </Drawer>
  );
};

export default DashboardDrawer;