import Stack from '@material-hu/mui/Stack';

import Alert from '@material-hu/components/design-system/Alert';
import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import Formulas from './components/Formulas';
import GoalLimit from './components/GoalLimit';
import ProgressControl from './components/ProgressControl';

type FeaturesStepProps = {
  isActiveCycle?: boolean;
};

const FeaturesStep = ({ isActiveCycle = false }: FeaturesStepProps) => {
  const { t } = useLokaliseTranslation('goals');

  return (
    <Stack sx={{ gap: 3 }}>
      <HuTitle
        title={t('cycle_steps.features.title')}
        description={t('cycle_steps.features.description')}
        variant="L"
      />
      {isActiveCycle && (
        <Alert
          severity="info"
          title={t('cycle_steps.features.edit_disabled_title')}
          description={t('cycle_steps.features.edit_disabled_description')}
        />
      )}
      <Stack sx={{ gap: 1 }}>
        <HuTitle
          title={t('cycle_steps.features.subtitle')}
          variant="M"
        />
        <GoalLimit disabled={isActiveCycle} />
        <Formulas disabled={isActiveCycle} />
        <ProgressControl disabled={isActiveCycle} />
      </Stack>
    </Stack>
  );
};

export default FeaturesStep;