import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import { useOrderDetails, useOrderStaticData } from '../../../store';
import { capitalize } from '../../../utils';

function AssemblyType() {
  const [orderData, setOrderData] = useOrderDetails();
  const [orderStaticData] = useOrderStaticData();
  const orderServices = orderData?.order_services;
  const cloneServices = [...orderServices];
  const assembleOrderService = orderStaticData?.order_service_list?.find(
    (x: any) => x?.type?.toLowerCase() === 'assemble'
  );
  const disassembleOrderService = orderStaticData?.order_service_list?.find(
    (x: any) => x?.type?.toLowerCase() === 'disassemble'
  );
  const assemblyTypeService = cloneServices?.find(
    (x: any) => x?.order_service_list_id === assembleOrderService?.id
  );
  const disassemblyTypeService = cloneServices?.find(
    (x: any) => x?.order_service_list_id === disassembleOrderService?.id
  );
  const assemblyTypeId =
    assemblyTypeService?.service_category_id ||
    disassemblyTypeService?.service_category_id;
  const assemblyTypeOptions = orderStaticData?.order_service_list_category?.map(
    (option: any) => ({
      label: capitalize(option.type.replaceAll('_', ' ')),
      value: option.id.toString(),
    })
  );

  const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    let updatedAssemblyTypeService = {};

    let updatedDisassemblyTypeService = {};

    let updatedOrderServices: any = [];

    if (
      (assemblyTypeService?.is_deleted === false &&
        disassemblyTypeService?.is_deleted === true &&
        disassemblyTypeService !== undefined &&
        disassemblyTypeService !== null) ||
      (disassemblyTypeService?.is_deleted === false &&
        assemblyTypeService?.is_deleted === true &&
        assemblyTypeService !== undefined &&
        assemblyTypeService !== null) ||
      (assemblyTypeService?.is_deleted === false &&
        disassemblyTypeService?.is_deleted === false)
    ) {
      updatedAssemblyTypeService = {
        ...assemblyTypeService!,
        service_category_id: +event.target.value,
      };
      updatedDisassemblyTypeService = {
        ...disassemblyTypeService!,
        service_category_id: +event.target.value,
      };
      updatedOrderServices = cloneServices?.filter(
        s =>
          s?.order_service_list_id !== assembleOrderService?.id &&
          s?.order_service_list_id !== disassembleOrderService?.id
      );
      updatedOrderServices.push(updatedAssemblyTypeService);
      updatedOrderServices.push(updatedDisassemblyTypeService);
    } else if (
      assemblyTypeService?.is_deleted === false &&
      (disassemblyTypeService?.is_deleted === true ||
        disassemblyTypeService === undefined ||
        disassemblyTypeService === null)
    ) {
      updatedAssemblyTypeService = {
        ...assemblyTypeService!,
        service_category_id: +event.target.value,
      };
      updatedOrderServices = cloneServices?.filter(
        s => s?.order_service_list_id !== assembleOrderService?.id
      );
      updatedOrderServices.push(updatedAssemblyTypeService);
    } else {
      updatedDisassemblyTypeService = {
        ...disassemblyTypeService!,
        service_category_id: +event.target.value,
      };
      updatedOrderServices = cloneServices?.filter(
        s => s?.order_service_list_id !== disassembleOrderService?.id
      );

      updatedOrderServices.push(updatedDisassemblyTypeService);
    }
    const newData = { ...orderData, order_services: updatedOrderServices };
    setOrderData(newData);
  };

  const isServiceDisable = () => {
    if (
      (assemblyTypeService?.is_deleted === true &&
        (disassemblyTypeService?.is_deleted === true ||
          disassemblyTypeService === undefined ||
          disassemblyTypeService === null)) ||
      (disassemblyTypeService?.is_deleted === true &&
        (assemblyTypeService?.is_deleted === true ||
          assemblyTypeService === undefined ||
          assemblyTypeService === null)) ||
      (assemblyTypeService === undefined &&
        disassemblyTypeService === undefined) ||
      (assemblyTypeService === null && disassemblyTypeService === null)
    ) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <Container $isDisable={isServiceDisable()}>
      <RadioButtonGroup
        selectedValue={assemblyTypeId?.toString() || ''}
        heading="Assembly Type"
        options={assemblyTypeOptions || []}
        onChange={radioGroupHandler}
        required={false}
        //@ts-ignore
        isDisabled={true}
      />
    </Container>
  );
}

const Container = styled.div<{ $isDisable: Boolean }>`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  pointer-events: ${props => (props.$isDisable ? 'none' : 'auto')};
  /* temporary change will add this in library */
  > fieldset {
    > div {
      > div {
        > label {
          text-transform: capitalize;
        }
      }
    }
  }
`;

export default AssemblyType;
