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);

    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>
      ),
    };
  });
  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"
      width="w-full"
      onChange={onChange}
      disabled={isDisabled}
    />
  );
});