import { DeleteOutlined } from '@ant-design/icons';
import { CustomInput } from '../../view/CustomInput';
import { LinkButton } from '../../view/LinkButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { Experience } from '../../../types/education';
import { i18nText } from '../../../i18nKeys';
import {useLocalStorage} from "../../../hooks/useLocalStorage";
import {AUTH_TOKEN_KEY} from "../../../constants/common";

type ExperiencesContentProps = {
    experiences?: Experience[];
    update: (ex?: Experience[]) => void;
    locale: string;
};

export const ExperiencesContent = ({
    experiences,
    update,
    locale
}: ExperiencesContentProps) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');

    const addExperience = () => {
        const ex = {
            title: undefined,
            description: undefined,
        };

        update(experiences?.length > 0
            ? [
                ...experiences,
                ex
            ]
            : [ex]);
    };

    const deleteExperience = (index: number) => {
        update([...experiences].filter((ex, i) => i !== index));
    };

    const onChangeName = (val: string, index: number) => {
        update(experiences?.map((ex, i) => {
            if (i === index) {
                return {
                    ...ex,
                    title: val,
                }
            }

            return ex;
        }));
    };

    const onChangeDesc = (val: string, index: number) => {
        update(experiences?.map((ex, i) => {
            if (i === index) {
                return {
                    ...ex,
                    description: val,
                }
            }

            return ex;
        }));
    };

    return (
        <div className="b-edu-content">
            <div className="b-edu-list">
                {experiences?.map(({ title, description}, index) => (
                    <div className="b-edu-list__item" key={`ex_${index}`}>
                        <div>
                            <CustomInput
                                value={title}
                                placeholder={i18nText('name', locale)}
                                onChange={(e) => onChangeName(e?.target?.value, index)}
                            />
                            <CustomInput
                                value={description}
                                placeholder={i18nText('description', locale)}
                                onChange={(e) => onChangeDesc(e?.target?.value, index)}
                            />
                        </div>
                        <LinkButton
                            type="link"
                            danger
                            icon={<DeleteOutlined />}
                            onClick={() => deleteExperience(index)}
                        />
                    </div>
                ))}
            </div>
            <OutlinedButton
                type="link"
                onClick={addExperience}
            >
                {i18nText('addNew', locale)}
            </OutlinedButton>
        </div>
    );
};