import React from "react";
import ReactSwitchsupport from "react-switch";

const GeneralTab = ({
    storeleds,
    setStoreleds,
    metadata,
    setMetadata,
    leadsinSlack,
    setLeadsinSlack,
    recipiantslack,
    setRecipiantslack
}) => {
    const handleLeadsinSlackChange = (checked) => {
        setLeadsinSlack(checked);
    };

    return (
        <div className="sf-settings-panel">
            <h3 className="review-case-title">General settings panel</h3>

            <div className="floating-widgets">
                <div className="wpnts-switch-review">
                    <label className="form-feature-heading" htmlFor="storeleds">Store SimpleForm leads in Database:</label>
                    <ReactSwitchsupport
                        checked={storeleds}
                        className="storeleds"
                        name="storeleds"
                        id="storeleds"
                        onChange={(checked) => setStoreleds(checked)}
                    />
                </div>

                <div className="wpnts-switch-review">
                    <label className="form-feature-heading" htmlFor="metadata">Collect SimpleForm metadata:</label>
                    <ReactSwitchsupport
                        checked={metadata}
                        className="metadata"
                        name="metadata"
                        id="metadata"
                        onChange={(checked) => setMetadata(checked)}
                    />
                </div>

                {/* Slack */}
                <div className="wpnts-switch-review">
                    <label className="form-feature-heading" htmlFor="leadsinSlack">Get SimpleForm leads in Slack:</label>
                    <ReactSwitchsupport
                        checked={leadsinSlack}
                        className="leadsinSlack"
                        name="leadsinSlack"
                        id="leadsinSlack"
                        onChange={handleLeadsinSlackChange}
                    />
                </div>

                {leadsinSlack && (
                    <div className="formInput">
                        <label className="form-feature-sub-heading" htmlFor="recipiantslack">Slack Webhook</label>
                        <div className="wpnts-setting">
                            <input
                                type="text"
                                className="recipiantslack"
                                id="recipiantslack"
                                name="recipiantslack"
                                value={recipiantslack}
                                onChange={(e) => setRecipiantslack(e.target.value)}
                            />
                        </div>
                    </div>
                )}

                <div className="seperationLine">
                    <hr />
                    <br />
                </div>
            </div>
        </div>
    );
};

export default GeneralTab;