import { truncate } from 'lodash-es';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { ChevronDownIcon } from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import Modal from '../modal/Modal';
import ProjectsDropdown from '../project/ProjectsDropdown';

export default observer(function WorkspaceTrigger({
  variant,
}: {
  variant?: ButtonVariant;
}) {
  const { project } = useStores();
  const [workspaceModalOpen, setWorkspaceModalOpen] = useState(false);
  return (
    <>
      {workspaceModalOpen && (
        <Modal
          onClose={() => {
            setWorkspaceModalOpen(false);
          }}
          title='Select Workspace'
        >
          <ProjectsDropdown editMode />
        </Modal>
      )}

      <Button
        onClick={() => setWorkspaceModalOpen(true)}
        shape={ButtonShape.Pill}
        variant={variant || ButtonVariant.Secondary}
        icon={<ChevronDownIcon />}
        className='py-1'
      >
        {truncate(project.currentProjectName ?? '', { length: 12 })}
      </Button>
    </>
  );
});