import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Label } from '@bjsdistribution/dms-component-library';
import StatusIndicator from './StatusIndicator';
import {
  useFlagById,
  useStaticData,
  useUpdateTask,
} from '../order-actions/store';
import { formatDate, priorityData } from '../order-actions/utils';
import { Select } from 'antd';

function ButtonsSection() {
  const [staticData] = useStaticData();
  const [flagById] = useFlagById();
  const [taskPayload, setTaskPayload] = useUpdateTask();

  const orderFlagTypes = staticData?.[0]?.order_flag_types || [];

  const taskTypeOptions = useMemo(
    () =>
      orderFlagTypes?.map((item: any) => ({
        label: item?.type,
        value: item?.id,
      })),
    [orderFlagTypes]
  );

  const getPriorityOptions = (staticData: any) => {
    return staticData?.[0]?.priorities?.map((option: any) => {
      const colorMatch = priorityData?.find(p => p.id === option.id);
      return {
        label: option.name,
        value: option.id,
        color: colorMatch?.color || '#ccc',
      };
    });
  };
  const priorityOptions = getPriorityOptions(staticData);

  const handleTaskTypeChange = (value: number) => {
    const selectedType =
      orderFlagTypes.find((type: any) => type.id === value)?.type || '';
    setTaskPayload(prev => ({ ...prev, flag_type: selectedType }));
  };

  const handlePriorityChange = (value: number) => {
    setTaskPayload((prev: any) => ({
      ...prev,
      priority: value,
    }));
  };

  const selectedTypeId = useMemo(
    () =>
      orderFlagTypes.find((type: any) => type.type === taskPayload?.flag_type)
        ?.id ||
      flagById?.flag_type ||
      null,
    [orderFlagTypes, taskPayload, flagById]
  );

  const isResolved = flagById?.status !== 'AD';

  const resolvedText = `Resolved on ${formatDate(
    flagById?.resolved_at || 'N/A'
  )} by ${flagById?.resolved_by || 'N/A'}`;

  return (
    <Buttons>
      <Flex>
        <Label label="Type" />
        <StyledAntSelect
          options={taskTypeOptions}
          placeholder="Select Type"
          onChange={handleTaskTypeChange}
          value={selectedTypeId}
        />
      </Flex>
      <Flex>
        <Label label="Priority" />
        <StyledAntSelect
          options={priorityOptions}
          placeholder="Select Type"
          onChange={handlePriorityChange}
          value={taskPayload?.priority || flagById?.priority}
        />
      </Flex>
      <Flex>
        <Label label="Status" />
        {isResolved ? (
          <StatusIndicator text={resolvedText} status="SD" />
        ) : (
          <StatusIndicator text="Unresolved" status="AD" />
        )}
      </Flex>
    </Buttons>
  );
}
export const StyledAntSelect: any = styled(Select)`
  .ant-select-selector {
    /* width: 22vw; */
    border-radius: 22px;
  }
`;

const Buttons = styled.div`
  display: flex;
  gap: 25px;
`;

const Flex = styled.div`
  margin-top: 20px;
`;

export default ButtonsSection;
