import styled from '@emotion/styled';
import { useLocalStorage } from 'usehooks-ts';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { ContextMenuTrigger } from '@/components/contextMenu/ContextMenu';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { MoreVerticalIcon } from '@/icons';

import StudioContextMenuContents from '../StudioContextMenuContents';

export const InteractionPill = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 1000px;
  padding: 4px;
  background-color: var(--color-background-secondary);
  backdrop-filter: blur(10px);
  transition: width 0.1s ease-in-out;
  overflow: hidden;
`;

const ExpandedPromptInputWrapper = styled.div`
  flex-grow: 1;
  border-radius: 50px;
  position: relative;
  input {
    width: 100%;
    background-color: transparent;
    padding-left: 16px;
    border-radius: 50px;
    height: 44px;
    border: 1px solid var(--color-border-secondary);
    &:focus {
      border-color: var(--color-accent-blue);
      outline: none;
    }
  }
  button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
  }
`;

export const ExpandedPromptInput = ({
  stateMemoryKey,
  buttonIcon,
  buttonText,
  placeholder,
  onSubmit,
}: {
  stateMemoryKey: string;
  buttonIcon: React.ReactNode;
  buttonText: string;
  placeholder: string;
  onSubmit: (value: string) => void;
}) => {
  const [value, setValue] = useLocalStorage(
    `interaction-expanded-prompt-input-2025-04-21-${stateMemoryKey}`,
    ''
  );
  return (
    <ExpandedPromptInputWrapper>
      <input
        onFocus={(e) => {
          e.target.select();
        }}
        type='text'
        placeholder={placeholder}
        value={value}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            onSubmit(value || '');
          }
        }}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <Tooltip label={buttonText}>
        <Button
          variant={ButtonVariant.Aura}
          shape={ButtonShape.Pill}
          icon={buttonIcon}
          onClick={() => onSubmit(value || '')}
        />
      </Tooltip>
    </ExpandedPromptInputWrapper>
  );
};

const InteractionContextMenuContents = (props: any) => (
  <StudioContextMenuContents
    key='context-menu-contents'
    {...props}
    eventTrigger='three-dot-menu'
  />
);

export const ContextMenuButton = () => (
  <ContextMenuTrigger
    placement='bottom-right'
    ButtonComponent={(props) => (
      <Tooltip label='More Options' placement='right'>
        <Button
          icon={<MoreVerticalIcon className='h-5 w-5' />}
          shape={ButtonShape.Pill}
          {...props}
        />
      </Tooltip>
    )}
    ContentsComponent={InteractionContextMenuContents}
  />
);