import EditGrayA from "@/components/icons/EditGrayA"
import EditOrangeA from "@/components/icons/EditOrangeA"
import { Button, TextField } from "@mui/material"

function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) {
    return (
        <div className="relative w-full">
            <TextField
                value={data?.value}
                rows={multiline}
                multiline={multiline}
                disabled={!data?.isEdit}
                placeholder={placeholder || ''}
                type='text'
                className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
                onChange={e => {
                    changeData(e.target.value, 'value', name)
                }}
                sx={{
                    '& .MuiFormLabel-root': {
                        top: '-4px !important'
                    },
                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
                    '& .MuiInputBase-root': {
                        padding: '0 !important',
                        borderRadius: '8px !important'
                    },
                    '.Mui-focused': {
                        '& .MuiOutlinedInput-notchedOutline': {
                            border: '1px solid #5559CE !important',
                            transition: '0.5s all'
                        }
                    }
                }}
            />
            <Button
                className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
                    ${multiline ? '!top-[24px]' : '!top-1/2'}`}
                onClick={() => {
                    changeData(!data.isEdit, 'isEdit', name)
                }}
            >
                {icon ? icon :
                    iconGray ? (
                        <EditGrayA />
                    ) : (
                        <EditOrangeA />
                    )}
            </Button>
        </div>
    )
}

export default EditField