import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Add } from '@mui/icons-material';

import { DEMAND_TAG_EVENT_BUDGETS_SIZE } from '@/modules/marketplace/account/constants';

import * as selectors from '../../../../redux/selectors';
import * as actions from '../../../../redux/slices';
import { isEqual } from '@/modules/@common/helpers';
import { getNextId } from '@/modules/marketplace/common/helpers';

import { Form, FormContent, FormRow, FormSection } from '@/modules/@common/Form';
import FormLineItem from './components/FormLineItem';
import LineItem from './components/LineItem';
import { Button, Stack } from '@/mui/components';

function BudgetingTab() {
  const dispatch = useDispatch();

  const budgeting = useSelector(selectors.budgetingSelector);
  const { budgetingTabList } = budgeting;

  const [showNewForm, toggleNewFrom] = useState(false);

  const isBudgetingRecordsHasDuplicate = (records) => (record) => {
    const hasDuplicate = records.some(({ id, budget, ...rest }) => isEqual(rest, record));
    return hasDuplicate;
  };
  return (
    <Form>
      <FormContent>
        <FormSection>
          <FormRow label="Basic Setting" justifyContent="flex-end" fullWidth>
            {!!budgetingTabList.length && (
              <Button
                onClick={() => toggleNewFrom(true)}
                size="small"
                startIcon={<Add />}
                disabled={budgetingTabList.length === DEMAND_TAG_EVENT_BUDGETS_SIZE}
              >
                New
              </Button>
            )}
            {!budgetingTabList.length && !showNewForm && (
              <Button size="small" onClick={() => toggleNewFrom(true)} data-id="add-new-line-item" startIcon={<Add />}>
                Add New Budgeting
              </Button>
            )}
          </FormRow>
          <FormRow fullWidth>
            <Stack fullWidth>
              <LineItem id="title" budget="Budget" type="Type" timeFrame="Time Frame" pacing="Pacing" isLabelRow />
              {showNewForm && (
                <FormLineItem
                  checkHasDuplicate={isBudgetingRecordsHasDuplicate(budgetingTabList)}
                  onSubmit={(data) => {
                    toggleNewFrom(false);
                    dispatch(
                      actions.setBudgetingTabAction({
                        budgetingTabList: [
                          {
                            id: getNextId(budgetingTabList),
                            ...data,
                            budget: parseFloat(data.budget),
                          },
                          ...budgetingTabList,
                        ],
                      }),
                    );
                  }}
                  onCancel={() => {
                    toggleNewFrom(false);
                  }}
                />
              )}
              {budgetingTabList.map((item) => (
                <LineItem
                  key={item.id}
                  id={item.id}
                  budget={item.budget}
                  type={item.type}
                  timeFrame={item.timeFrame}
                  pacing={item.pacing}
                  checkHasDuplicate={isBudgetingRecordsHasDuplicate(budgetingTabList)}
                  onSubmit={(data) =>
                    dispatch(
                      actions.setBudgetingTabAction({
                        budgetingTabList: budgetingTabList.map((i) =>
                          i.id === data.id ? { ...data, budget: parseFloat(data.budget) } : i,
                        ),
                      }),
                    )
                  }
                  onDelete={(id) =>
                    dispatch(
                      actions.setBudgetingTabAction({
                        budgetingTabList: budgetingTabList.filter((i) => i.id !== id),
                      }),
                    )
                  }
                />
              ))}
            </Stack>
          </FormRow>
        </FormSection>
      </FormContent>
    </Form>
  );
}

export default BudgetingTab;
