import React from "react";
import { observer } from "mobx-react-lite";
import { Ban } from "lucide-react";
// hooks
import { useMember } from "hooks/store";
// ui
import { Avatar, CustomSearchSelect } from "@plane/ui";

type Props = {
  value: any;
  onChange: (val: string) => void;
  isDisabled?: boolean;
};

export const MemberSelect: React.FC<Props> = observer((props) => {
  const { value, onChange, isDisabled = false } = props;
  // store hooks
  const {
    project: { projectMemberIds, getProjectMemberDetails },
  } = useMember();

  const options = projectMemberIds
    ?.map((userId) => {
      const memberDetails = getProjectMemberDetails(userId);

      if (!memberDetails?.member) return;

      return {
        value: `${memberDetails?.member.id}`,
        query: `${memberDetails?.member.display_name}`,
        content: (
          <div className="flex items-center gap-2">
            <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
            {memberDetails?.member.display_name}
          </div>
        ),
      };
    })
    .filter((option) => !!option) as
    | {
        value: string;
        query: string;
        content: React.JSX.Element;
      }[]
    | undefined;
  const selectedOption = getProjectMemberDetails(value);

  return (
    <CustomSearchSelect
      value={value}
      label={
        <div className="flex items-center gap-2">
          {selectedOption && <Avatar name={selectedOption.member.display_name} src={selectedOption.member.avatar} />}
          {selectedOption ? (
            selectedOption.member.display_name
          ) : (
            <div className="flex items-center gap-2">
              <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
              <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
            </div>
          )}
        </div>
      }
      buttonClassName="!px-3 !py-2"
      options={
        options &&
        options && [
          ...options,
          {
            value: "none",
            query: "none",
            content: (
              <div className="flex items-center gap-2">
                <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
                <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
              </div>
            ),
          },
        ]
      }
      maxHeight="md"
      onChange={onChange}
      disabled={isDisabled}
    />
  );
});