import { IconEdit } from '@material-hu/icons/tabler';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { type Goal } from '../../types';

import { useGoalWeightsDrawer } from './useGoalWeightsDrawer';
import useGoalWeightsTexts from './useGoalWeightsTexts';

type GoalWeightsDrawerProps = {
  goals: Goal[];
  goalCycleId: number | null;
  ownerId: number;
  query: string;
  fromMyGoalsPage: boolean;
};

const GoalWeightsDrawer = ({
  goals,
  goalCycleId,
  ownerId,
  query,
  fromMyGoalsPage,
}: GoalWeightsDrawerProps) => {
  const { getText } = useGoalWeightsTexts({ fromMyGoalsPage });
  const { openDrawer, hasGoals } = useGoalWeightsDrawer({
    goals,
    goalCycleId,
    ownerId,
    query,
    fromMyGoalsPage,
  });

  return (
    <Button
      variant="outlined"
      endIcon={<IconEdit />}
      onClick={() => openDrawer()}
      disabled={!hasGoals}
    >
      {getText()}
    </Button>
  );
};

export default GoalWeightsDrawer;
